NgFor doesn't update data with Pipe in Angular2
AngularAngular2 TemplateAngular2 DirectivesAngular PipeAngular Problem Overview
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;
}
}
Angular Solutions
Solution 1 - Angular
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 –
studentsdoesn't change – hence the stateless/pure pipe is not executed. - When something is typed into the filter input,
queryElem.valuedoes 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.
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.
Solution 2 - Angular
As Eric Martinez pointed out in the comments, adding pure: false to your Pipe decorator and changeDetection: ChangeDetectionStrategy.OnPush to your Component decorator will fix your issue. Here is a working plunkr. Changing to ChangeDetectionStrategy.Always, also works. Here's why.
According to the angular2 guide on pipes:
> Pipes are stateless by default. We must declare a pipe to be stateful by setting the pure property of the @Pipe decorator to false. This setting tells Angular’s change detection system to check the output of this pipe each cycle, whether its input has changed or not.
As for the ChangeDetectionStrategy, by default, all bindings are checked every single cycle. When a pure: false pipe is added, I believe the change detection method changes to from CheckAlways to CheckOnce for performance reasons. With OnPush, bindings for the Component are only checked when an input property changes or when an event is triggered. For more information about change detectors, an important part of angular2, check out the following links:
Solution 3 - Angular
You don't need to change the ChangeDetectionStrategy. Implementing a stateful Pipe is enough to get everything working.
This is a stateful pipe (no other changes were made):
@Pipe({
name: 'sortByName',
pure: false
})
export class SortByNamePipe {
tmp = [];
transform (value, [queryString]) {
this.tmp.length = 0;
// console.log(value, queryString);
var arr = value.filter((student)=>new RegExp(queryString).test(student.name));
for (var i =0; i < arr.length; ++i) {
this.tmp.push(arr[i]);
}
return this.tmp;
}
}
Solution 4 - Angular
From the angular documentation
Pure and impure pipes
There are two categories of pipes: pure and impure. Pipes are pure by default. Every pipe you've seen so far has been pure. You make a pipe impure by setting its pure flag to false. You could make the FlyingHeroesPipe impure like this:
@Pipe({ name: 'flyingHeroesImpure', pure: false })
Before doing that, understand the difference between pure and impure, starting with a pure pipe.
Pure pipes 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 you change an input month, add to an input array, or update an input object property.
This may seem restrictive but it's 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.
For this reason, a pure pipe is preferable when you can live with the change detection strategy. When you can't, you can use the impure pipe.
Solution 5 - Angular
Instead of doing pure:false. You can deep copy and replace the value in the component by this.students = Object.assign([], NEW_ARRAY); where NEW_ARRAY is the modified array.
It works for angular 6 and should work for other angular versions as well.
Solution 6 - Angular
There is now no need to overcomplicate things!
Making the pipe impure does not cause any errors in development mode in newer versions of Angular. I guess the error mentioned in the currently accepted answer had something to do with this issue, which was resolved 5.5 (!) years ago (shortly after this question was posted).
As far as I understand, Angular now uses IterableDiffer to detect changes in arrays returned by impure pipes exactly as it does with normal arrays that appear in a template (when the default change detection strategy is used), so it does not think it is a problem when the array reference has changed provided that its contents have not. That means there won't be any error if we generate a new array each time, so we can just make the pipe impure, and that will do the trick.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sortByName',
pure: false
})
export class SortByNamePipe implements PipeTransform {
transform(value, queryString) {
return value.filter(student => new RegExp(queryString).test(student.name));
}
}
Solution 7 - Angular
A workaround: Manually import Pipe in constructor and call transform method using this pipe
constructor(
private searchFilter : TableFilterPipe) { }
onChange() {
this.data = this.searchFilter.transform(this.sourceData, this.searchText)}
Actually you don't even need a pipe
Solution 8 - Angular
Add to pipe extra parameter, and change it right after array change, and even with pure pipe, list will be refreshed
let item of items | pipe:param
Solution 9 - Angular
In this usage case i used my Pipe in ts file for data filtering. It is much better for performance, than using pure pipes. Use in ts like this:
import { YourPipeComponentName } from 'YourPipeComponentPath';
class YourService {
constructor(private pipe: YourPipeComponentName) {}
YourFunction(value) {
this.pipe.transform(value, 'pipeFilter');
}
}
Solution 10 - Angular
to create impure pipes are costly at performance. so not create impure pipes, rather change the reference of data variable by create copy of data when change in data and reassign the reference of copy in original data variable.
emp=[];
empid:number;
name:string;
city:string;
salary:number;
gender:string;
dob:string;
experience:number;
add(){
const temp=[...this.emps];
const e={empid:this.empid,name:this.name,gender:this.gender,city:this.city,salary:this.salary,dob:this.dob,experience:this.experience};
temp.push(e);
this.emps =temp;
//this.reset();
}