When using a change detection strategy of OnPush, other than making sure to pass new references every time something should change, you can also make use of the ChangeDetectorRef for complete control. This concludes modifying a sample parent and child component to use the OnPush change detection strategy. Angular detected a new reference to data, so it ran its change detection on the child component. You are returning a completely new array.Īfter recompiling, you should observe that the application behaves as before. With this variation, you are no longer mutating the aquaticCreatures array. addAquaticCreature (newAquaticCreature ) //. Let’s examine a sample component with a child component that displays a list of aquatic creatures and allows users to add new creatures to the list:Īpp.component.ts //.

This article also references the RxJS library and familiarity with BehaviorSubject and Observable may also be helpful.Įxploring a ChangeDetectionStrategy Example.

Some familiarity with Angular components may be helpful.

If you would like to follow along with this article, you will need: In this article, you will learn about ChangeDetectionStrategy and ChangeDetectorRef. This will instruct Angular to run change detection on these components and their sub-tree only when new references are passed to them versus when data is mutated. One solution is to use the OnPush change detection strategy for specific components. A change can occur from a user event or data received from a network request.Ĭhange detection is very performant, but as an app gets more complex and the amount of components grows, change detection will have to perform more and more work.

By default, Angular 2+ performs change detection on all components (from top to bottom) every time something changes in your app.

Angularjs handler on resize