Change detection strategy in angular – simplified

June 4, 2018

Angular is based on  component.It is having component within component architecture.Change detection look for changes in bindings from root to leaves from top to bottom. The library Zone.js lets Angular find out when to update the DOM. Angular performs change detection on component and child components when some changes occur in your App.But as the number of components increases change detection becomes heavy.In order to tackle this we can do change detection strategies to onPush to certain components.So that change detection only runs for the specific component  in the component sub tree when there is a change by reference not merely by value.

See the below parent component which has a child component , to which a food object is passed from the parent.There are two buttons,one changes the name property in the object , other changes the object as a whole.When the change detection strategy onPush  is enabled the first function which change name property will not reflect in the child.The second function which changes the reference of thevariable changes the value in the child component.Now if the  Change detection strategy was default ,both the functions would have changed the value in the child component.

 

 

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *