Angular 2 on refresh binding is undefined

Question

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;

score 1 · Answer 1 · edited May 23 '17 at 10:31

1

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.

edited May 23 '17 at 10:31

Community

1
1

answered Apr 06 '16 at 03:39

Yaniv Efraim

6,633
7
53
96

Yes, it will wait with page load until data arrived, I guess this was your problem at first place, right? – Yaniv Efraim Apr 06 '16 at 10:15
@JamalJames cool, please mark my solution as the answer, if it solved your problem – Yaniv Efraim Apr 07 '16 at 03:39
I just did @YanivEfraim – Jamal James Apr 07 '16 at 04:27
@JamalJames cool! You can mark the the 'V' sign so people will know this was the right answer for you (: – Yaniv Efraim Apr 07 '16 at 04:36

score 1 · Answer 2 · answered Apr 06 '16 at 04:18

1

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 {  }

answered Apr 06 '16 at 04:18

Günter Zöchbauer

623,577
216
2,003
1,567

I guess so but it's difficult without being able to reproduce. If you could provide a Plunker, I could verify if this is actually what solves your issue. Currently it's only a guess. – Günter Zöchbauer Apr 06 '16 at 10:05
Did you try my suggestion? – Günter Zöchbauer Apr 06 '16 at 12:17
It works, but the problem I have to do it on every component which is used on "RouteConfig" for specific URL! – Jamal James Apr 06 '16 at 15:35
The problem is that every component needs the json document before rendering the component. So I have to explicitly add "if switch" to every single component. – Jamal James Apr 06 '16 at 15:46
I think this is still the best way to make your components async-compatible. Usually not every async call is caused by navigation and route change. – Günter Zöchbauer Apr 06 '16 at 17:07

Angular 2 on refresh binding is undefined

2 Answers2