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:
๐๐จ๐ฎ ๐๐๐ง ๐๐จ๐ฆ๐๐ข๐ง๐ ๐ฉ๐ข๐ฉ๐๐ฌ:
ย {{ birthday | date | uppercase }}
๐๐ง ๐๐จ๐ง๐๐ฅ๐ฎ๐ฌ๐ข๐จ๐ง, Pipes allows doing low complexity data transformations inside templates.
For more complex transformation, you would rather use services or dedicated components.