Transforming Data with Pipes

Sometimes the data is not in an appropriate format that we want to show. We use pipe in that case. Pipes transform bound properties before they are displayed.

There are build-in pipes for formatting value like data, number, decimal, currency, json, slice etc. We can also build our own custom pipe.

Simple Pipe
{{ product.productCode | lowercase }}

Pipe in Property Binding
<img [src]='product.imageUrl'
     [title]='product.productName | uppercase'>

Chaining Pipe
{{ product.price | currency | lowercase }}

Pipe with Parameters
{{ product.price | currency:'USD':true:'1.2-2' }}

Our new code after adding pipes

Share this

Related Posts