Angular 2/4 @input Only Moves Intrinsics - Not Lists Or Objects

I am trying to @Input a list of objects; this results in the @Input variable being undefined. What works: home.component.html: And the code in home.component.ts It-Easy gets th

Solution 1:

TL;DR: Dont access @Input parameters in construcor. Use ngOnInit if you don't use async pipe and use ngOnChanges if you do use async pipe.

---

You are trying to access @Input properties too early in Angulars component Lifecycle. Constructor is not the lifecycle hook itself and its not a place to access @Input parameters.

Generally about hooks: https://angular.io/guide/lifecycle-hooks

As that page say:

The constructor isn't an Angular hook per se. The log confirms that input properties (the name property in this case) have no assigned values at construction.

You should wait at least for ngOnInit() and access it there although there are more considerations about it here: https://angular.io/guide/reactive-forms#when-to-set-form-model-values-ngonchanges

Namely, even in ngOnChanges, although it fires first time before ngOnInit, when using aysnc pipe you still might not have data in ngOnInit. So, as a safest and standard way, you should access your @Input in ngOnChanges and inspect its parameters to filter those @Input parameters that are of your interest at the moment.