CODEWITHSUNDEEP
angular
user3836415
user3836415

Reputation: 982

Performance: Two way data binding using @Input and getters/setters

I've split up my components into sub components to try and get resuability out of certain components. One of my components has been split 3 components, and now they are being used as nested child components :

Page component (with a service)
- Widget component (Passing in an object using @Input)
  -Settings component (Passing in an Object using @Input with getter/setter and EventEmitter)
   - General Settings component (Passing in a variable of type string from the parent object using @Input with getter/setter and EventEmitter)
    -Input (bound using ngModel)

The following stackblitz is from the following stackoverflow question.

In my specific project what I'm finding is that using getters/setters to do the two way binding down the chain of components is very heavy to the point that the browser window needs to be closed.

From trying to investigate the problem I've noticed that when I alter the value in the input field, the getters continuously get fired. You can see this when you add a console.log in the get block.

My question is whether there is a way to overcome this, or have I mis-interpreted the way that two way databinding in custom components should work ?

NB: I tried to use the Performance tab in Chrome's development console, but I didn't know how to interpret the results. Coming to the conclusion that it has something to do with the getter being called continuously is just from trial and error.

Upvotes: 0

Views: 750

Answers (1)

Adrian Brand
Adrian Brand

Reputation: 21648

Your problem is because you are firing the event emmitter inside the setter, you have created a two way binding feedback loop.

The event emitter updates the parent component and the new value is fed back into the setter.

Upvotes: 0

Related Questions