Learning Angular/

...

/

Working with Pipes in Angular

Working with Pipes in Angular

Learn how to work with different types of pipes in an Angular application.

We'll cover the following...

Examples of built-in pipes

We can now start learning about the various Angular built-in pipes:

The uppercase/lowercase pipes

They transform a string into a particular case. Experiment with the following snippet in the product-list.component.html file to display the product name in uppercase and lowercase letters, respectively:

HTML
{{product.name | uppercase}}
{{product.name | lowercase}}

The percent pipe

This formats a number as a percentage. For example, the output of the following code will be 12%.

HTML
<p>{{0.1234|percent}}</p>

The currency pipe

This formats a number as a local currency. We can override local settings and change the symbol of the currency, passing the currency code as a parameter to the pipe. Open the product-detail.component.html file and add the following element after the product name to display the price of the selected ...