Angular 2 pipe triggering

Question

I have a collection of models. In template I use pipe

<div class="card-panel" *ngFor="let card of cards | sortByType">
    <card-view [card]="card" [autoupdate]="true"></card-view>
</div>

In each component I have a timer for update data. But when model is updated, pipe didn't run again. Is there way to force run pipe or do some angular way in this situation.

In card-view I have a timer that updated card variable. But Angular don't catch this changes for triggering pipe

Possible duplicate of [NgFor doesn't update data with Pipe in Angular2](http://stackoverflow.com/questions/34456430/ngfor-doesnt-update-data-with-pipe-in-angular2) — Clint, Oct 28 '16 at 08:52

score 17 · Accepted Answer · answered Oct 28 '16 at 08:55

You can create a copy of cards than Angular2 change detection detects the change and executes the pipe again.
You can make the pipe impure

@Pipe({ name: 'sortByType', pure: false})

this causes your pipe to be executed every time change detection is run.

You can do custom change detection using the IterableDiffer, and return cached result when the array didn't actually change.

With this option you have to be careful to not cause serious performance degradation.

You can pass an additional parameter to the pipe that you update (for example a number that gets increased every time the array changes.

This way the pipe gets called because Angular change detection calls the pipe every time the value or a parameter changes.

A disadvantage is that it is a bit more cumbersome to use.

Angular 2 pipe triggering

1 Answers1