Pipes in Angular

Pipes in Angular

Imagine if you could change the way certain information looked on the screen. This could be with respect to styling, size, or format. You can do all that and more with Angular Pipes. Angular Pipes allows its users to change the format in which data is being displayed on the screen. For instance, consider the date format. Dates can be represented in multiple ways, and the user can decide which one to use with the help of Angular Pipes.

What are Angular Pipes?

Angular Pipes transform the output. You can think of them as makeup rooms where they beautify the data into a more desirable format. They do not alter the data but change how they appear to the user.

Technically, pipes are simple functions designed to accept an input value, process, and return a transformed value as the output. Angular has a few built-in Pipes that ship with the framework’s CommonModule, allowing us to make use of them in any module we’re writing.

Some salient features include:

• Pipes are defined using the pipe “|” symbol.
• Pipes can be chained with other pipes.
• Pipes can be provided with arguments by using the colon (:) sign.

So, how do we use a Pipe? Let’s assume some simple component HTML with a binding of a Date stamp:

<div>
  <!-- Renders: 21/10/2019 -->
  <p>{{ myDateValue | date:'M/d/yy' }}</p>
</div>

This could render out as above with the formatted Date. So that’s a valid use case for Pipes! We don’t really want to fetch data and then loop through it all and convert each date from a Date object to a String, as we’d lose native Date object functionality and be duplicating values. It’s super convenient to use a Pipe and let it parse out for us!

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'-->

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>
                            

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:

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;
  }
}

Conclusion

AngularJS is a great multi-functional framework which speeds up your development process. It offers dependency injection and deep linking, and is a robust platform for software development.