NgFor doesn't update data with Pipe in Angular2

Question

In this scenario, I'm displaying a list of students (array) to the view with ngFor:

<li *ngFor="#student of students">{{student.name}}</li>

It's wonderful that it updates whenever I add other student to the list.

However, when I give it a pipe to filter by the student name,

<li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>

It does not update the list until I type something in the filtering student name field.

Here's a link to plnkr.

Hello_world.html

<h1>Students:</h1>
<label for="newStudentName"></label>
<input type="text" name="newStudentName" placeholder="newStudentName" #newStudentElem>
<button (click)="addNewStudent(newStudentElem.value)">Add New Student</button>
<br>
<input type="text" placeholder="Search" #queryElem (keyup)="0">
<ul>
    <li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>
</ul>

---

sort_by_name_pipe.ts

import {Pipe} from 'angular2/core';

@Pipe({
    name: 'sortByName'
})
export class SortByNamePipe {

    transform(value, [queryString]) {
        // console.log(value, queryString);
        return value.filter((student) => new RegExp(queryString).test(student.name))
        // return value;
    }
}

---

Answer 1

To fully understand the problem and possible solutions, we need to discuss Angular change detection -- for pipes and components.

Pipe Change Detection

Stateless/pure Pipes

By default, pipes are stateless/pure. Stateless/pure pipes simply transform input data into output data. They don't remember anything, so they don't have any properties – just a transform() method. Angular can therefore optimize treatment of stateless/pure pipes: if their inputs don't change, the pipes don't need to be executed during a change detection cycle. For a pipe such as {{power | exponentialStrength: factor}}, power and factor are inputs.

For this question, "#student of students | sortByName:queryElem.value", students and queryElem.value are inputs, and pipe sortByName is stateless/pure. students is an array (reference).

• When a student is added, the array reference doesn't change – students doesn't change – hence the stateless/pure pipe is not executed.
• When something is typed into the filter input, queryElem.value does change, hence the stateless/pure pipe is executed.

One way to fix the array issue is to change the array reference each time a student is added – i.e., create a new array each time a student is added. We could do this with concat():

this.students = this.students.concat([{name: studentName}]);

Although this works, our addNewStudent() method shouldn't have to be implemented a certain way just because we're using a pipe. We want to use push() to add to our array.

Stateful Pipes

Stateful pipes have state -- they normally have properties, not just a transform() method. They may need to be evaluated even if their inputs haven't changed. When we specify that a pipe is stateful/non-pure – pure: false – then whenever Angular's change detection system checks a component for changes and that component uses a stateful pipe, it will check the output of the pipe, whether its input has changed or not.

This sounds like what we want, even though it is less efficient, since we want the pipe to execute even if the students reference hasn't changed. If we simply make the pipe stateful, we get an error:

EXCEPTION: Expression 'students | sortByName:queryElem.value  in HelloWorld@7:6' 
has changed after it was checked. Previous value: '[object Object],[object Object]'. 
Current value: '[object Object],[object Object]' in [students | sortByName:queryElem.value

According to @drewmoore's answer, "this error only happens in dev mode (which is enabled by default as of beta-0). If you call enableProdMode() when bootstrapping the app, the error won't get thrown." The docs for ApplicationRef.tick() state:

In development mode, tick() also performs a second change detection cycle to ensure that no further changes are detected. If additional changes are picked up during this second cycle, bindings in the app have side-effects that cannot be resolved in a single change detection pass. In this case, Angular throws an error, since an Angular application can only have one change detection pass during which all change detection must complete.

In our scenario I believe the error is bogus/misleading. We have a stateful pipe, and the output can change each time it is called – it can have side-effects and that's okay. NgFor is evaluated after the pipe, so it should work fine.

However, we can't really develop with this error being thrown, so one workaround is to add an array property (i.e., state) to the pipe implementation and always return that array. See @pixelbits's answer for this solution.

However, we can be more efficient, and as we'll see, we won't need the array property in the pipe implementation, and we won't need a workaround for the double change detection.

Component Change Detection

By default, on every browser event, Angular change detection goes through every component to see if it changed – inputs and templates (and maybe other stuff?) are checked.

If we know that a component only depends on its input properties (and template events), and that the input properties are immutable, we can use the much more efficient onPush change detection strategy. With this strategy, instead of checking on every browser event, a component is checked only when the inputs change and when template events trigger. And, apparently, we don't get that Expression ... has changed after it was checked error with this setting. This is because an onPush component is not checked again until it is "marked" (ChangeDetectorRef.markForCheck()) again. So Template bindings and stateful pipe outputs are executed/evaluated only once. Stateless/pure pipes are still not executed unless their inputs change. So we still need a stateful pipe here.

This is the solution @EricMartinez suggested: stateful pipe with onPush change detection. See @caffinatedmonkey's answer for this solution.

Note that with this solution the transform() method doesn't need to return the same array each time. I find that a bit odd though: a stateful pipe with no state. Thinking about it some more... the stateful pipe probably should always return the same array. Otherwise it could only be used with onPush components in dev mode.

---

So after all that, I think I like a combination of @Eric's and @pixelbits's answers: stateful pipe that returns the same array reference, with onPush change detection if the component allows it. Since the stateful pipe returns the same array reference, the pipe can still be used with components that are not configured with onPush.

Plunker

This will probably become an Angular 2 idiom: if an array is feeding a pipe, and the array might change (the items in the array that is, not the array reference), we need to use a stateful pipe.