Angular 2 child component loads before data passed with @input()

Question

I have two component in my angular 2 application : component A (parent) and component B (child).

When i passe data (myData) from A to B with @Input() i get my data in my B (child component), but the problem is that the child component loads BEFORE myData and i got indefined, the only way a can console.log(myData) is in ngOnDestroy hook !

How to deal with this kind of load order ?

Answer 1

Use *ngIf in your parent component to delay the initialization of the child component. You will bind the child component only if myData has a value.

<parent-component>
  <child-component [input]="myData" *ngIf="myData"></child-component>
</parent-component>

Answer 2

You can simply use a *ngIf in your parent like

< child-component *ngIf="myData" > </child-component>