Pipes and Change Detection

Go back to Tutorial

Angular looks for changes to data-bound values through a change detection process that runs after every DOM event: every keystroke, mouse move, timer tick, and server response. This could be expensive. Angular strives to lower the cost whenever possible and appropriate.

Angular picks a simpler, faster change detection algorithm when you use a pipe.

No pipe

In the next example, the component uses the default, aggressive change detection strategy to monitor and update its display of every hero in the heroes array. Here’s the template:

src/app/flying-heroes.component.html (v1)

New hero:

<input type=”text” #box

(keyup.enter)=”addHero(box.value); box.value=””

placeholder=”hero name”>

<button (click)=”reset()”>Reset</button>

<div *ngFor=”let hero of heroes”>

{{hero.name}}

</div>

The companion component class provides heroes, adds heroes into the array, and can reset the array.

Go back to Tutorial