In the child component, I am receiving an object from the parent component that looks like this:
{
attribute: 'aaaa',
attribute2: [
{
value
},
{
value
},
{
value
},
]
}
This object is passed to the child component as an @Input. When changes are made to the objects inside the attribute2 array, I want the child component to detect these changes and update accordingly. Since manipulating the object directly did not work, I ended up cloning the entire object in the parent component using (
this.object = _.cloneDeep(this.object)Is there a more efficient way to achieve this without having to clone the entire object? Thank you for your help!
EDIT:
Child Component
export class ChildComponent implements OnInit, OnChanges {
@Input() public object: any;
}
html
<div>
<span>{{object.attribute}}</span>
<div *ngFor="let items of object.attribute2">{{item.value}}</div>
</div>
Parent Component
export class ParentComponent implements OnInit {
public object: any;
updateObject() {
this.object.attribute2[1] = 'Changed value';
this.object = _.cloneDeep(this.object);
}
}
html
<div>
<child-component [object]="object"></child-component>
</div>