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

1. The main purpose of using Pipes
2. The built-in Pipes in Angular
3. Chaining Multiple Pipes
4. 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.

my-birthday.component.ts

my-birthday.component.html

The output of Birthday

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.

my-birthday.component.html

Note — “We should call the pipes in the template expression (in the HTML) part”

The output of Birthday after using the date pipe

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

pipes-demo.component.ts

pipes-demo.component.html

The output

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

Chaining the DatePipe and the UpperCase pipe together in my-birthday.component.html

The out

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

chaining order of the pipes are changed

The code is not working as expected and also giving a console error

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

long paragraph

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

shorted.pipe.ts

Then register our pipe in the ‘app.module.ts’

app.module.ts

Then use our custom pipe in the template (custom-pipes.component.html) expression.

custom-pipes.component.ts

custom-pipes.component.html

Output (only displaying few words from starting)

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.