Pure pipe

A pure pipe transforms a value for display and runs its transform method only when its input value or an argument changes. In the @Pipe decorator, pure defaults to true. A pure pipe has no independent state: Angular can determine when to reevaluate it through change detection. section 17.3.4 section 17.0

import { Pipe } from "@angular/core";
import { Product } from "./product.model";
 
@Pipe({
    name: "filter",
    pure: true
})
export class PaCategoryFilterPipe {
 
    transform(products: Product[] | undefined, 
          category: string | undefined): Product[] {
        if (products == undefined) {
            return [];
        }
        return category == undefined ?
            products : products.filter(p => p.category == category);
    }
}

The category filter declares pure: true. It receives a product array and a category argument, then returns products in that category. Changing the category argument causes Angular to reevaluate the result. section 17.3.4

The limitation appears when an input object stays the same but its contents change. Adding, editing, or deleting an element in the existing product array does not cause this pure filter to run again: Angular still sees the same array as its input. The built-in date pipe is also pure; changing components of an existing Date object will not refresh its display. Supply a different Date object reference when that display must update. section 17.3.4 section 17.4.4

import { Pipe } from "@angular/core";
import { Product } from "./product.model";
 
@Pipe({
    name: "filter",
    pure: false
})
export class PaCategoryFilterPipe {

    transform(products: Product[] | undefined, 
            category: string | undefined): Product[] {
        if (products == undefined) {
            return [];
        }
        return category == undefined ?
            products : products.filter(p => p.category == category);
    }
}

Changing the filter declaration to pure: false makes it an impure pipe without changing its transform method. Angular then calls transform during change detection even when the input and arguments have not changed, so edits within the existing array can affect the displayed filter result. section 17.3.4

Use an impure pipe sparingly. Its transform method can run after unrelated application changes or user interactions, so keep the work simple; repeatedly sorting an array can seriously harm performance. Impurity is also useful when a result depends on state that input and argument changes do not reveal, such as a value held by an injected service. section 17.3.4 section 18.2.3

import { Pipe } from "@angular/core";
import { DiscountService } from "./discount.service";
 
@Pipe({
    name: "discount",
    pure: false
})
export class PaDiscountPipe {
 
    constructor(private discount: DiscountService) { }
 
    transform(price: number): number {
        return this.discount.applyDiscount(price);
    }
}

The discount pipe declares pure: false and injects DiscountService. Its transform method applies the service’s current discount to a price, allowing the result to update when the stored discount changes even if the price does not. section 18.2.3