A pipe is a native Angular element, which takes data in input and transforms it to a specified kind of output.
It is mainly for simple display arrangements.
๐๐ก๐๐ซ๐ ๐๐ซ๐ ๐ญ๐ฐ๐จ ๐ค๐ข๐ง๐๐ฌ ๐จ๐ ๐ฉ๐ข๐ฉ๐๐ฌ:
โ๐๐๐ญ๐ข๐ฏ๐ ๐ฉ๐ข๐ฉ๐๐ฌ which are directly available in your templates:
Your birthday is the {{ birthday | date }}
Here, in the example above, we use the pipes to transform a date in a pretty format, easy to read for the user.
The available pipes in Angular are: DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe & PercentPipe.
โ๐๐ฎ๐ฌ๐ญ๐จ๐ฆ ๐ฉ๐ข๐ฉ๐๐ฌ that cover cases not covered by Angular:
mport { Pipe, PipeTransform } from '@angular/core'; // {{ pokemon.type | pokemonTypeColor }} @Pipe({name: 'pokemonTypeColor'}) export class PokemonTypeColorPipe implements PipeTransform { transform(type: string): string{ let color:string; switch (type) { case 'Feu': color= 'red lighten-1'; break; case 'Eau': color= 'blue lighten-1'; break; case 'Plante': color= 'green lighten-1'; break; default: color= 'grey'; break; } return 'chip ' + color; } }
๐๐จ๐ฎ ๐๐๐ง ๐๐จ๐ฆ๐๐ข๐ง๐ ๐ฉ๐ข๐ฉ๐๐ฌ:
ย {{ birthday | date | uppercase }}
๐๐ง ๐๐จ๐ง๐๐ฅ๐ฎ๐ฌ๐ข๐จ๐ง, Pipes allows doing low complexity data transformations inside templates.
For more complex transformation, you would rather use services or dedicated components.