Why Input value is not changed in parent?

Question

I get obejct in children component:

  @Input() public object: ObjectLayer;

Then I try to update this object by reference:

this.object.id = 100;

But parent components does not react on this. Also I tried to reassign object:

 Object.assign(this.object, {...this.object});

How to fix it?

The parent component has no change detection strategy

Answer 1

If you want the value to be updated in parent then you have to use angular two way binding.

In the child you need both input and output

@Input() public object: ObjectLayer;
@Output() objectChange = new EventEmitter<ObjectLayer>();

and after updating the value you need to emit the event

this.object.id = 100;
this.objectChange.emit(this.object);

In the parent you need to use [()] or banana brackets

<componentName [(object)]="object" >

Answer 2

If you pass the reference of this.object in child component you can check the data in these way. In parent.component.html you may able to add a button which will print the latest value using this.object reference what you have pass in child component

<app-child [object]="object"></app-child>
<button (click)="getLatestValue()"></button>

In parent.component.ts

public getLatestValue():void{
console.log(this.object);
 }

Answer 3

the thing you are trying to do is an antipattern. the object is updated in the parent, but because of change detection inside of the parent happened before the child's one, you don't see the result of update on the template. the valid way of sending updates from the child to the parent is @Output()

@Output() objectUpdated = new EventEmitter<DataModel>();


method() {
  this.objectUpdated.next(newValue)
}