Pipes in Angular 9

Table of contents

Reading Time: 5 minutes

What are Pipes ?

Pipes in Angular allows you to transform output in your template. Pipes are a feature built into Angular. The easy it sounds, the easier it is to code. In this blog, we will learn the basics of pipe, how to implement them, and their use cases in different scenarios. To begin, we just need to know that pipes are something that transforms values in the way you want it to.
Prerequisites: Basic understanding of Angular Components, Directives, and the structure of an Angular application.

Types of Pipes

The pipes in Angular are of two types:

Built-in Pipes
Custom Pipes

The built-in pipes are those which are already given to us by the Angular and are ready to use. Whereas, in some scenarios, the built-in pipes are not sufficient to fulfill our use case. In such situations, we create our own pipes, known as custom pipes. In the coming sections, we will learn how to use inbuilt pipes and also how to create and use custom pipes according to our needs.
Let’s start with built-in pipes:

Built-in Pipes

Angular contains built-in pipes for data transformations. The following are commonly used built-in pipes for data formatting:

DatePipe: Formats a date value according to locale rules.
UpperCasePipe: It transforms text to all upper case.
LowerCasePipe: It transforms text to all lower case.
CurrencyPipe: Transforms a number to a currency string.
DecimalPipe: Used to transform a number into a string with a decimal point.
PercentPipe: Transforms a number to a percentage string.

Now we know some of the basic inbuilt pipes, let’s see how to implement them in our code. As mentioned earlier they are super easy to use, now you will see that for yourself.
Let’s observe the code for the uppercase pipe:

<h3>The name of the product is {{ name | uppercase }}</h3>

In the above code, the name of the product is converted to the uppercase using the UpperCasePipe. The way to implement or use a pipe is to put a pipe operator ” | ” right after the value that has to be transformed. After that, simply put the name of the pipe to be used on the value (uppercase in this scenario). Similarly, all other pipes can be used. For example, if we want the name to be in lowercase every time, we can simply change the name of the pipe in the following way:

<h3>The name of the product is {{ name | lowercase }}</h3>

Now, before moving towards custom pipes, let’s learn 2 important concepts of pipe, namely:

Parameterised Pipes
Chaining of Pipes

Parameterised Pipes

Pipes work similarly to a normal programming function which takes one or more inputs and returns something after processing it. Till now we have only passed the value to the pipes but now we will take it one step further. We will format the pipe as per our requirement. In the below example, I have taken the case of CurrencyPipe. Although, you can do it with many other pipes like DatePipe.

First, let’s see what will be the output if we use a CurrencyPipe without formatting or parameterizing.

<p>{{Value | currency}}</p>
<!--output '$100.23'-->

Here, we can clearly see that the default currency is USD. The value will be prefixed by “$” if we do not pass any specific currency name to the currency pipe. So for now, let’s say that we want to display data in the Indian currency. Let’s see how to achieve that.

<p>{{Value | currency:'INR'}}</p>
<!--output '₹100.23'-->

Chaining of Pipes

Pipes can be chained with each other. It simply means that we can apply more than one pipes on a single value one after the other. The output given by the first pipe is taken as an input by the second pipe and so on. Hence, the order of the pipes matters.

So let’s say that first, we want to use the DatePipe and then convert that string to uppercase. Let’s implement it.

<p>My date of birth is {{ birthday | date:"MM/dd/yy" | uppercase }}</p>

The above code will first convert the birth date in the format we mentioned and then convert everything to the uppercase.

Custom Pipes

Sometimes, you might need some functionality which just isn’t built-in. In that case, you need to create your own pipe i.e you need to create a custom pipe. To create your own pipe you must create a new file. Let’s just say that we want to create a pipe that shortens the length of the words if they exceed a given limit, say 15 letters. For this, first, we will create a pipe named shortenText (you can choose any name) by using the following terminal command:

ng generate pipe shortenText

Inside shortenText.pipe.ts file, we code in the following manner:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'shorten'
})
export class ShortenText implements PipeTransform {
  transform(value: any) {
   if(value.length > 15) {
     return value.substr(0,15);
    }
   return value;
  }
}

In the above code, we used the Pipe decorator to tell Angular that we are creating a Pipe. The “name” property contains a value which will be used in the template through which we access this Pipe. It must be unique for all the Pipes present in an application. Then we have implemented an interface PipeTransform. It contains a method “transform()” that takes at least one parameter which is the value a pipe needs as an input. After that, it is a normal programming function and behaves according to the logic inside it.

Now this pipe can be used just like built-in pipes in the following way:

<p>The product name is {{ name | shorten }}</p>

In the Pipe we created above, we are enforcing the character length of 15. It would be nice if we allow the user to pass the length on his own. For this, we must parameterize our custom pipe. It is super easy to implement. Let’s have a look:

Custom Pipes with parameters

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'shorten'
})
export class ShortenText implements PipeTransform {
  transform(value: any, limit: number) {
   if(value.length > limit) {
     return value.substr(0,limit);
    }
   return value;
  }
}

As you can see for yourself, we just made a minor change by accepting the second parameter. Based on the second parameter received, we are now slicing the value. The template code will look like this now:

<p>The product name is {{ name | shorten:10 }}</p>

Now it will shorten the value to 10 characters. Remember, if we do not pass any parameter to this pipe now, it will not work as the second parameter in the transform method will receive undefined and hence break our logic.

Conclusion

Use pipes to transform and format strings, currency amounts, dates, and other display data. Pipes are simple functions you can use in template expressions to accept an input value and return a transformed value. This was a basic introduction of Pipes in Angular. There are many useful built-in pipes and we can create beautiful custom pipes any time. Feel free to explore more about pipes in Angular Docs: