Let's say that you're looking for a way to transform the way data is displayed without actually changing the data. But you're tired of writing the same parsing functions over and over again. Don't worry, Angular Pipes have got you covered! They provide a clean, lightweight method to transform your data straight from the HTML template. No longer will you need to worry about how to display JSON or dates, or even Title Casing strings.
This series of articles will try to encourage you to use Pipes in your daily workflow. I'll be demonstrating how to use the Pipes that come with Angular. Later in the series, I'll show how to create your own pipes. Let's get started!
TL;DR: To see the full project, check it out here.
Case Pipes
These pipes simply change the case of the text being displayed. There are 3 main pipes:
The code snippets below demonstrate these 3 pipes in action:
And this is the output:
Text-based Pipes!
This is our string: My sTriNg to ChANge!
Uppercase Pipe -> MY STRING TO CHANGE!
Lowercase Pipe -> my string to change!
Titlecase Pipe -> My String To Change!
Displaying different cases has never been easier ;)
Number Pipes (and also, Pipes with Parameters?!)
Let's say you want to calculate a decimal number as accurately as possible but you don't want to display a bajillion decimal places. Number Pipes can help us out here. There are 3 main types:
Each of these may warrant their own explanation.
DecimalPipe
This allows us to control the number of decimal places of a small number. See the following code:
And this is the output:
Number-based Pipes!
This is our small number: 0.14285714285714285
Decimal Pipe: 0.143 (This is 3 decimal places by default)
Decimal Pipe at 4 decimal places: 0.1429
You'll notice something slightly different about this pipe. It doesn't just say {{smallNumber | number}}. It says {{smallNumber | number:'1.4'}}. What's going on?
Some Angular Pipes are built to accept parameters. At the end of the day, the Pipe is simply a function. However, parameters for Pipes are always strings. In this particular example, '1.4' is broken up to mean "One digit before the decimal point and a minimum of 4 digits after the decimal point". You can find more information on the DecimalPipe here.
When building your own pipes, it's up to you to decide the format for the parameter and what it means.
PercentPipe
This simply converts our decimal number to display a percentage.
And the corresponding output:
Our number for percent: 0.12
Percent Pipe: 12%
CurrencyPipe
Angular also provides the CurrencyPipe for displaying different currencies as follows:
And the output:
Currency Pipes!
Our number: 19.99
Currency Pipe: $19.99
Canadian Currency: CA$19.99
Indian Currency: ₹19.99
This pipe takes in multiple parameters but the main one to focus on is the type of currency to be displayed. In the above example, I displayed Canadian (CAD) and Indian (INR) currencies.
A word about locale.
We may be accustomed to writing large numbers as 1,000,000.25. But that might not be common for other countries. For example, some countries would write the same number as 1.000.000,25. Other countries may separate every three digits with spaces, or separate every 4 digits instead of 3.
The CurrencyPipe also helps us handle this but you'll need to import the locale data at the module level and build with specific parameters using the CLI. This applies for any locale usage in Angular. See here for more info.
Conclusion
And that's it! That's your introduction to using Pipes in Angular. They're pretty simple to use in your application without having to write functions to do the parsing for us.
Stay tuned for Part 2 of this series where we dive into more complicated pipes :D
Top comments (0)