Working with Pipes in Angular
Explore how to apply various Angular built-in pipes such as uppercase, currency, date, slice, json, async, and keyvalue pipes to transform and display data dynamically in your application. Understand when and why to use each pipe to improve data presentation and debugging in Angular components.
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:
The percent pipe
This formats a number as a percentage. For example, the output of the following code will be 12%.
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 ...