@Input @Output and EventEmitter in Angular 4

Question

I'm building an app with Angular 4 & Ionic 3 and I'm struggling with components:

I made a component MesuresPreventionsComponent (excuse my french :p) , this component needs a list from his parent component (the Ionic Page), but I'd also like it to be able to update the list in the parent component.

So I learned about @Input and @Output and thought I would use an EventEmitter to detect changes and update the list from the parent.

I've read this Stack Overflow answer and figured out how to do it.

So this is what i did :

@Output() targetChange: EventEmitter<Array<any>> = new EventEmitter<Array<any>>();

@Input() set target(value){
    this.target = value;
  };

Then I emit my data on button click this way:

alert.addButton({
    text: 'Ok',
    handler: (data: any) => {
      this.targetChange.emit(data);
      console.log('Radio data:', data)
    }
})

On my parent component (the ionic page) I'm using my MesuresPreventionsComponent in template :

<mesures-preventions  [(target)]="conditionsGeneralesDeTravail.mesuresPreventionsConseillees" ></mesures-preventions>

But the thing is the @Input() set target(value) is called over 9000 times when the page loads, throwing a Range Error :

Uncaught (in promise): RangeError: Maximum call stack size exceeded RangeError: Maximum call stack size exceeded at MesuresPreventionsComponent.set [as target] (http://localhost:8100/build/0.js:153:23) at MesuresPreventionsComponent.set [as target] (http://localhost:8100/build/0.js:154:25) at MesuresPreventionsComponent.set [as target] (http://localhost:8100/build/0.js:154:25) at MesuresPreventionsComponent.set [as target] (http://localhost:8100/build/0.js:154:25) at MesuresPreventionsComponent.set [as target] (http://localhost:8100/build/0.js:154:25) at MesuresPreventionsComponent.set [as target] (http://localhost:8100/build/0.js:154:25) at MesuresPreventionsComponent.set [as target] (http://localhost:8100/build/0.js:154:25) at MesuresPreventionsComponent.set [as target] (http://localhost:8100/build/0.js:154:25) at MesuresPreventionsComponent.set [as target] (http://localhost:8100/build/0.js:154:25) at MesuresPreventionsComponent.set [as target] (http://localhost:8100/build/0.js:154:25)

I tried to make a console.log in the set target(value) method and it's displayed indeed 2k times in a second.

I have no idea why this method is executing itself in loop.

Could anyone help ?

Thank you for your time :)

ibenjelloun ibenjelloun · Accepted Answer · 2018-06-07T14:24:46

You are calling target inside target setter.

Replace :

@Input() set target(value) {
  this.target = value;
};

By :

@Input() target;

Also, you can't use bidirectional binding [(target)] you should replace it by [target]. If you want to create components with bidirectional binding, take a look at this alligator.io tutorial.

@Input @Output and EventEmitter in Angular 4

1 Answers