Pipes in Angular -Explained — Part: 1
Introduction
The Pipes are a built-in feature in Angular which allows us to transform output in the template. By reading this article you will get a solid understanding of Angular pipes. This article describes
- The main purpose of using Pipes
- The built-in Pipes in Angular
- Chaining Multiple Pipes
- Creating Custom Pipes
The main purpose of using pipes
The main purpose of using pipes in Angular is “Transforming the output”. What does it mean by that? Let’s look at a small example.
Let’s say you are going to display the date of birth in your Angular app without using a pipe.
See the output of the birthday. Is it easy to understand? Is it can be easily understood by a human? Why do we displaying extra GMT and other blah blah thinks? Here we only need to display the birthday in a formatted way. This is where the Pipes are shines
Now let’s use one of the built-in pipes in the Angular called “date” and then see the output.
Note — “We should call the pipes in the template expression (in the HTML) part”
The ‘date’ pipe transforms the date as ‘Sep 12, 1995’. So you got the idea of the purpose of using the pipes in the Angular applications.
Built-in Pipes in Angular
Angular has some built-in pipes for typical data transformations. The following built-in pipes are the most commonly used built-in pipes.
- DatePipe: Formats a date value according to the locale rules. It uses ‘date’ as the keyword with the pipe operator. The syntax is as follow
{{ value_expression | percent [ : digitsInfo [ : locale ] ] }}
- UpperCasePipe: Transforms all the text to upper case. It uses the ‘uppercase’ as the keyword with the pipe operator. The syntax is as follow
{{ value_expression | uppercase}}
- LowerCasePipe: Transforms all the text to lower case. It uses the ‘lowercase’ as the keyword with the pipe operator. The syntax is as follow
{{ value_expression | lowercase}}
- CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules. It uses the ‘currency’ as the keyword with the pipe operator. The syntax is as follow
{{ value_expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]}}
- DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules. It uses the ‘number’ as the keyword with the pipe operator. The syntax is as follow
{{ value_expression | number[ : digitsInfo ] }}
- PercentPipe: Transforms a number to a percentage string, formatted according to locale rules. It uses the ‘percent’ as the keyword with the pipe operator. The syntax is as follow
{{ value_expression | percent [ : digitsInfo] }}
Let’s see an example for each of these built-in pipes
Chaining Multiple Pipes
We can chain more than one pipes to format our output. Let’s say we want to display the Birthday and then we should make all the texts to uppercase. See the example below
Note: Always remember when we chaining multiple pipes the order of the pipes from left to right is matter. You must consider the order of the pipes to get accurate output other wise you will get error. See the following code snipet that won’t work
Creating Custom Pipes
Angular also provides the feature for creating custom pipes. We can implement the feature that is not provided with the built-in pipes.
Let’s say you are developing a website for posting your blogs. You have a very long paragraph on your website like the following one
You don’t need to display all these texts instead, you only need to display a few words from the paragraph like the following
So we can achieve this by creating a custom pipe. So let’s create a custom pipe for that.
Create a new file ‘shorted.pipe.ts’ and write your logic
Then register our pipe in the ‘app.module.ts’
Then use our custom pipe in the template (custom-pipes.component.html) expression.
So this is how built the custom pipes in Angular.
See you in Part 2 of this article ;)
Thank you
Thank you very much for spending your time. I hope this article will give you a better explanation of Angular pipes. In part 2 of this article, we will discuss Parameterizing a pipe, pure, and impure pipes soon.