[Angular 2] Pipe Purity

Explaining how Pipes only change by default when your Pipe input parameters change and not when your data changes. It also shows you how to make an 「unpure」 pipe if you always want your pipe to update.

 

import {Pipe} from 'angular2/angular2';

@Pipe({
    name: 'startsWith'
})

export class StartsWith{

    transform(value, [field, letter]){
        return value.filter((item) => {
            return item[field].startsWith(letter);
        })
    }
}

Current Pipe only watch for [field, letter] changes, not value changes.

 

The way to tell pipe also watch for value changes is just add 'pure: false':

import {Pipe} from 'angular2/angular2';

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

export class StartsWith{

    transform(value, [field, letter]){
        return value.filter((item) => {
            return item[field].startsWith(letter);
        })
    }
}