A pipe takes in data as input and transforms it to a desired output.
Angular pipes let you declare display-value transformations in your template HTML.
Built-in pipes: DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe
date, currency
Parameterizing a pipe : To add parameters to a pipe, follow the pipe name with a colon ( : ) and then the parameter value (such as currency:'EUR'). If the pipe accepts multiple parameters, separate the values with colons (such as slice:1:5)
Chaining pipes: c You can chain pipes together in potentially useful combinations. {{ birthday | date | uppercase}}
Custom pipes:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'limitText'
})
class LimitText implements PipeTransform{
transforms(text: string, args){
return text.sub
}
}
Pure and impure 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.
@Pipe({
name: 'flyingHeroesPure',
pure: true
})
Detecting impure changes within composite objects
To execute a custom pipe after a change within a composite object, such as a change to an element of an array, you need to define your pipe asimpure to detect impure changes. Angular executes an impure pipe every time it detects a change with every keystroke or mouse movement.@Pipe({
name: 'flyingHeroesImpure',
pure: false
})
REFERENCE : Click here
