Angular trigger EventEmitter whenever object contents is changed

Question

I'm using a child component to build a complex object consisting of recursive child arrays and objects. I'd like a way to get access to this object in the parent component using live binding.

Values within the object change based on user input (select boxes, inputs etc.), so I need a way to emit the @Output() EventEmitter and pass the entire object whenever one if it's properties change.

Any ideas on how to accomplish this or is there another route I can take?

See some concept code below, in which the input has two-way data binding to a deep value in the complex object, and I need to emit this change to a parent by detecting the change somehow.

The actual form is more complex, so I'd like to avoid using specific events like watching for a change in each of the inputs to manually trigger the event emitter if possible.

Parent template:

<child-component (emitter)="emitterHandler($event)"></child-component>

Parent component:

emitterHandler(obj){ console.log(obj); }

Child component:

@Output() emitter: EventEmitter<any> = new EventEmitter();    
complexObj = {data: 'test', lines: [{data: 'asd', time: 123},{data: 'xcv', time: 233}]};

Child template:

<input [(ngModel)]="complexObj.lines[0].data"></input>

you can emit eventemitter on change of your input <input [(ngModel)]="complexObj.lines[0].data" (change)="emitEmitter()"></input> — JayDeeEss
Thanks for the suggestion. The form is a little more complex than illustrated with lots of potential inputs. It would be a shame to have to use on change detection for each of the inputs. Is there any other way? — NJ.

Vivek Doshi Vivek Doshi · Accepted Answer · 2017-10-18T13:39:29

You can use valueChanges of the NgForm :

Component

@ViewChild('myForm') myForm: NgForm;

// this will be called when any input inside the form changes
this.myForm.valueChanges.subscribe(val => {
    // emit the event
});

Template

<form #myForm='ngForm' ...>
    // your select , input or nany form elements
</form>

Above code is for template driven form,

Here is the article for data-driven form on this : https://alligator.io/angular/reactive-forms-valuechanges/

Nice way to go is :

this.myForm.statusChanges.subscribe(res => {
    if (res === 'VALID') {
       // emit(this.myForm.values)
    }
});

This will emit the values when the data is valid, and in above code, no matter values is right or wrong it will fire the event.

Angular trigger EventEmitter whenever object contents is changed

1 Answers