I have a @Input property in my child component of type Person and I'm passing the object from the parent component through an attribute
Full working code is available in StackBlitz
I explored the following question I got the point that what they told in the answer but I tried the Object.assign and other things based on the answer but it fails to load the data in View.
How can I pass the Object through @Input and how can I do some manipulation once the object reached to the child component and need to update in the view?
Sample Code:
App Component:
import { Component } from '@angular/core';
import { Person } from './models/person'
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
person: Person = {
firstName: 'Emma',
lastName: 'Watson'
};
}
App Component HTML:
<user [user-profile]="person"></user>
User Component:
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Person } from '../models/person';
@Component({
selector: 'user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit, OnChanges {
@Input('user-profile') profile: Person;
person: Person;
constructor() {}
ngOnInit() {
this.person = {
firstName: '',
lastName: ''
}
}
ngOnChanges(changes:SimpleChanges): void {
if(typeof this.profile !== 'undefined'
&& typeof this.profile.firstName !== 'undefined'
&& typeof this.profile.lastName !== 'undefined') {
this.person.firstName = this.profile.firstName;
this.person.lastName = this.profile.lastName;
}
}
}
User Component HTML:
Full Name: {{person.firstName}} {{person.lastName}}
I need to do some manipulation once I received the object from @Input and need to update it in the UI. I know the object is passing as reference but here I tried with Object.assign and I assigned the property with undefined and then the appropriate object nothing is working.
Remove the asignment of person from ngOnInit(), ngOnInit runs after ngOnChanges so you are restting the values back to empty
export class UserComponent implements OnInit, OnChanges {
@Input('user-profile') profile: Person;
person: Person = { firstName: '', lastName: '' }; // initialize it here
constructor() {}
ngOnInit() {
// this.person = {
// firstName: '',
// lastName: ''
// }
}
ngOnChanges(changes:SimpleChanges): void {
if(typeof this.profile !== 'undefined'
&& typeof this.profile.firstName !== 'undefined'
&& typeof this.profile.lastName !== 'undefined') {
console.log(this.profile)
this.person.firstName = this.profile.firstName;
this.person.lastName = this.profile.lastName;
console.log(this.person)
}
}
}