@Input() value is always undefined
In my case i had to use *ngIf = "isLoaded" on the parent's template first.
On Parent Component
<div *ngIf = "isLoaded">
<app-child-component [dataToChild]="dataFromParent"> </app-child-component>
</div>
On Child Component
@Input() dataToChild: any;
constructor() { }
ngOnInit(): void {
console.log(this.dataToChild);
}
It will be initialized in ngOnInit
, not the constructor. (Please also review the Angular Life Cycle Hooks documentation.)
ngOnInit() {
console.log('userId is:',this.userId);
}
Also if you want to pass a literal like a string and use brackets []
you have to pass it as a string by enclosing the value with single ticks.
<user-photos [userId]="'TestingInput'"></user-photos>
The reason for that is the containing expression is evaluated in the context of the containing component so without it it will try to retrieve and pass a property/field named TestingInput
which will be undefined (unless you also happen have a field by that name).