ngOnInit is faster than @Input

Question

I have a situation that i m passing a value from a father component to child component with @Input. The problem is that i dont get the value from father before ngOnInit() triggered in the child component. So what happens is that when ngOnInit() tries to do sg with the value its "undefined", and a second later the value filled but ngOnInit() already done. I hope it was clear enough.

Is there any way to kind of synchronice this two so, first i get the data than fill the elements ?

         @Input('data')
      set data(value) {
        this._data = value;
         this.noActivityData = (this._data === null || this._data === undefined);
      }

ngOnInit() {

     if(this._data){
       elements.activeTimeDistribution.selected = !this.noActivityData;
       elements.stepsDay.selected = !this.noActivityData;
       elements.walkingSpeed.selected = !this.noActivityData;
       elements.activeTimeDistribution.disabled = this.noActivityData;
       elements.stepsDay.disabled = this.noActivityData;
       elements.walkingSpeed.disabled = this.noActivityData;

     }

    });
  }

Can you try putting your @Input() in the constructor since that is ‘loaded’ before anything else like ngOnInit() — Pari Baker, Jul 18 '19 at 11:51
Why not call to a function "init" in `set data` and forget ngOnInit()? — Eliseo, Jul 18 '19 at 11:59

Sam · Accepted Answer · 2019-07-18T11:58:09.813

4

One option would be to add *ngIf to your child component and only render it once the parent gets the value you want to pass through

<app-child-component
*ngIf="variable_you_want_to_pass_through">
</app-child-component>

You could also use ngOnChanges, and run whatever you want to run in the ngOnInit method in here, as this will fire if the parent value changes.

https://angular.io/api/core/OnChanges

edited Jul 18 '19 at 11:58

answered Jul 18 '19 at 11:52

Sam

1,736
8
15

ngOnInit is faster than @Input

1 Answers1