What are Pipes ? Default Pipes? Custom Pipes?

A pipe is a way to write display-value transformations that you can declare in your HTML. It takes in data as input and transforms it to a desired output.

Please note – Pipe only change the display value and not the real time values , they remain as it is.

Use Case : Alter Date format in display or make a text uppercase

Angular provides number of default pipes which suffices many of the requirements.

Exhaustive list is present at https://angular.io/api/common#pipes.

How to use : 

To apply a pipe, use the pipe operator (|) within a template expression as shown in the following code example, along with the name of the pipe. Also ,we can pass multiple parameters by using colon.

Few Examples : 

<p>{{ 'angular' | uppercase }}</p>   //ANGULAR

<p>{{ 0.123456 | percent }}</p>  // 12%

@Pipe({

name: 'truncateText'

})

<span>

{{longString | truncateText : 12 : 18}}

</span>

transform(value: string, startLen , endLen): unknown {

return `${value.substr(startLen,endLen)}...`;

}