Used to transform data in the template, e.g.
<!-- Template -->
<p>Oooboy we're gonna get fancy on {{ fancyDay | date }}</p>
Some common built-in pipes are date, currency, uppercase, lowercase, decimal and percent.
Creating custom pipes is very simple, they just need to implement a transform function:
// Component
import { Pipe, PipeTransform } from `@angular/core`;
@Pipe({name: 'party'}) // 👈 pipe name to use in template
export class PartyPipe implements PipeTransform {
transform(value: string): string {
return '🎉🎉🎉' + value + '🎉🎉🎉';
}
}
Which can then be used in a template like this:
<p>Party time on {{ partyDay | date | party }}</p>