Angular Custom Component databinding

Question

I have the following use case where i want to pass a part of a complex object to an angular component.

<app-component [set]="data.set"></app-component>

Now i want the object 'data.set' in the parent class to always be the same like the object 'set' inside the child class.

If I instead do it the following way, both objects are the same and changes are "synced".

<app-component [set]="set"></app-component>

How can i achieve this behaviour, when binding 'data.set' instead of 'set' , without manually triggering an EventEmitter ?

Answer 1

If you need changes done to set within app-component to be visible in parent component, then, you need to use two-way binding.

<app-component [(set)]="data.set"></app-component>

In the app-component.component.ts file, you need to declare two members:

   @Input()
   public set: any;

   @Ouput()
   public setChange:EventEmitter = new EventEmitter();

And whenever, there is change to the value of set , you need to emit the updated value.

   this.setChange.emit(newVal);

You could refer to this article if you need more details.