Working with Pipes in Angular
Learn how to work with different types of pipes in an Angular application.
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:
Press + to interact
{{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%.
Press + to interact
<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 ...