Angular2 doesn't detect changes in Array

Question

I am on an Ionic2 / Angular2 project. There I have a

*ngFor="let item of items | async | customPipe"

in my code. The async is because items is an Observable<Item[]>. My customPipe is working fine on the first run. But when I make any change to one if the items that would filter it out through my customPipe it is still shown.

What's the problem? Is the *ngFor only run once? Or do I have to force a DOM-update? Thanks for any help.

Answer 1

According to Angular2 pipe docs:

Angular executes a pure pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).

Angular ignores changes within (composite) objects. It won't call a pure pipe if we change an input month, add to an input array, or update an input object property.

Reason:

This may seem restrictive but is is also fast. An object reference check is fast — much faster than a deep check for differences — so Angular can quickly determine if it can skip both the pipe execution and a view update.

So while you change your array or the elements inside the array, the arrays reference doesn't change.

So switching to .onPush or triggering the change detection manually might solve your problem.

Source: https://angular.io/docs/ts/latest/guide/pipes.html#!#pure-and-impure-pipes

Answer 2

Old question but I also stumbled upon the problem of triggering a pure pipe when the array changes.

To let the pure pipe know, that the array changes, we need to pass a new reference of the array. So in the case of items you can try it like this:

this.items = changedItems.slice();