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.
