Mixing
@Input() value is always undefined
@Input() value is always undefined
I have created a user photo component which takes an @Input() value, this value is the userId. If the value is passed in then I retrieve information from Firebase linking to this userId, if it doesn't then I do something else.
user photo component
@Input()
Firebase
My user-photo component
import { Component, OnInit, OnDestroy, Input } from '@angular/core';
@Component({
selector: 'user-photos',
templateUrl: './user-photos.component.html',
styleUrls: ['./user-photos.component.css']
})
export class UserPhotoComponent implements OnInit {
@Input() userId: string;
constructor() {
console.log('userId is:',this.userId);
}
ngOnInit() {
}
ngOnDestroy() {
}
}
As you can see I have declared the userId as @Input(), now on my edit-profile component I have the following:
@Input()
edit-profile component
<user-photos [userId]="TestingInput"></user-photos>
Now the User Photo component gets rendered as I see the h1 tag appearing, however the userId is always undefined ?
h1
No errors are appearing in the developer console, so I'm not entirely sure what I've done wrong.
2 Answers
2
It will be initialized in ngOnInit, not the constructor. (Please also review the Angular Life Cycle Hooks documentation.)
ngOnInit
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).
TestingInput
In my case, I was passing in undefined as an input and I was assuming that Angular will treat the case of undefined the same as the default scenario. This assumption was wrong even if it is not clearly outlined in Angular's Component Interaction documentation. Here is the use case scenario:
undefined
parent.component.html:
...
[mVal]="undefined"
...
child.component.ts:
...
@input('mVal')
mVal: boolean = true
...
The value of mVal will be undefined and not true as you might have expected.
mVal
undefined
true
Angular will make the value true (default case) only if it is not defined on the parent component; otherwise, it will pass-in the value as it is (even if it is undefined).
undefined
You can solve this by checking if the value is undefined on OnInit or even in the component's constructor.
OnInit
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Can confirm it works, perfect thanks for your help and the additional information. Can't accept answer at the moment have to wait three minutes. Will do it asap.
– Code Ratchet
Feb 8 '17 at 20:52