CODEWITHSUNDEEP
angularangular2-template
Jamal James
Jamal James

Reputation: 91

Angular 2 on refresh binding is undefined

ApplicationComponent:

@RouteConfig([
  {path:'/', name: 'Dashboard', component: DashboardComponent, useAsDefault: true},
  {path:'/model/:id', name: 'ModelDetail', component: ModelDetailComponent},
])

The visitor directly visit: http://localhost:8080/model/4

Before we can render "ModelDetailComponent", we need to load all models inside the class ngOnInit().

ngOnInit() {
    let id = parseInt(this.routeParams.get('id'));
    this.modelService.subject$.subscribe(models => {
      if ( models.length > 0 ) {
        this.model = models[0];
      }
    })
    this.modelService.getModel(id);
  }

template:

<h1>{{model.name}}</h1>
<model-list [model]="model"></model-list> //nested compnent that also use the model.

property

public model:IModel;

Upvotes: 1

Views: 1818

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657741

Just use

<h1>{{model?.name}}</h1>

(added ?) then it doesn't matter that the data arrives later.

If you have lots of such bindings it might be easier to wrap the whole template with *ngIf

@Component({
  selector: 'my-component',
  template' `
    <div *ngIf="model">
      <h1>{{model.name}}</h1>`})
    <div>
class MyComponent {  }

Upvotes: 1

Yaniv Efraim
Yaniv Efraim

Reputation: 6713

I think what you are looking for is the CanActivate hook. It will allow you to wait with component rendering until data is resolved (similar to Angular 1.x resolve feature).

See this for more details.

Upvotes: 1

Related Questions