I am trying to use angular to send data from parent to child component. In my parent component I use a onclick event to send data to my child component.
In my child component user-profile.ts i have this:
@Input('user')
set user(user: any) {
}
I know that the component recieved the data because if i console.log(user) it shows the data. However it doesnt see the data in the html. In the html of this file i have this
<h1>
{{ user.name }}
</h1>
But i then get the error: "Cannot read property 'name' of undefined". What logic do i put into my .ts file to fix this?
Use below in your user-profile.ts
@Input() user: any; // or use your User type
and in your child component html file you can keep your change. To avoid undefined errors you can use. In your html.
{{user?.name}}
You haven't written the get statement
private _user; //Always defined the type instead using the any
@Input('user')
set user(value: any) {
this._user = value;
}
get user() {
return this._user;
}
and also check null handle in user property, if data delayed.
//HTML
<h1>
{{ user?.name }}
</h1>
Please make sure you had pass the correct object and it not undefined. Or the best way is have it own default value.