Pipes in Angular change data prior to UI presentation. Angular's built-in pipes handle typical transformations including date formatting, currency conversion, and uppercase/lowercase changes.

Inbuild pipe

<p>{{ today | date:'shortDate' }}</p>

Custom Pipe- we can create our own custom pipes

@Pipe({ name: 'upperCustom' })
export class upperCustom implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

 

Angular Pure Pipe 

Angular Pure Pipes are stateless and only re-evaluate when their input changes. Preventing needless recalculations improves performance.

 

// custom-pipe.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'customPipe',
    pure: true
})
export class CustomPipe implements PipeTransform {
     transform(value: any): any {
     ….
     return transformedValue;
 }
}

 

Impure pipe
Angular calls an impure pipe for every change detection cycle, unrelated to the change in the input fields. Each of these pipes generates several pipe instances. The inputs of these pipes can be changed.

@Pipe({
   name: 'impurePipe',
   pure: false
})
export class ImpurePipe {

All pipelines are pure by default. But, as shown below, the pure attribute lets you define impure pipes