Angular 2 Pipes

Pipes in Angular 2 transform the data in our templates (HTML) for a good user experience.

angular 2 pipes example

A Pipe is a transformer of a given data into a more readable data.

try angular 2 pipes

Imagine that we have a text that contains the first name of a user in lowercase (this is the input) when the Pipe receives this data it transforms this input into an output (e.g. transform into Uppercase)

Built-in Pipes

Built-in Pipes (e.g. | uppercase) they come with Angular 2.

In our first example we will transform the yourName = “everybody” into ‘EVERYBODY’ with an Angular 2 built in Pipe: uppercase.

Keep in mind that this Pipe (uppercase comes with angular 2). We have other Pipes DatePipe, LowerCasePipe, CurrencyPipe, and PercentPipe