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 supports many built-in pipes. However, you can also create custom pipes that suit your requirements. 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.
Some commonly used predefined Angular pipes are:
- DatePipe: Formats a date value.
- UpperCasePipe: Transforms text to uppercase.
- LowerCasePipe: Transforms text to lowercase.
- CurrencyPipe: Transforms a number to the currency string.
- PercentPipe: Transforms a number to the percentage string.
- DecimalPipe: Transforms a number into a decimal point string.
Using Built-in Angular Pipes
As mentioned above, Angular provides several built-in pipes to beautify the data being shown on the user interface.
In the following section, we have added the code and screenshots of a few built-in pipes like lowercase, uppercase, and slice.
In the pipes.component.ts file, we’ve created properties for date and name.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-pipes',
templateUrl: './pipes.component.html',
styleUrls: ['./pipes.component.css']
})
export class PipesComponent implements OnInit {
dateToday: string;
name: string;
constructor() { }
ngOnInit(): void {
this.dateToday = new Date().toDateString();
this.name = "Simplilearn"
}
}
In Pipes.component.html, we’ve interpolated the properties and used pipes to format them.
<h1>
Date: {{ dateToday }} <br>
Date Pipe: {{ dateToday | date | uppercase}}<br>
Date Pipe: {{ dateToday | date: 'short' | lowercase}} <br>
Name: {{ name | uppercase}} <br>
Name: {{ name | slice:6}}
</h1>
The output looks like this
In the code mentioned above, the date property initially displays in the default format. However, when used with the date pipe, the format changes. We’ve also used other pipes like uppercase and lowercase for better understanding.
As you can see, we have used the slice pipe for the name property. This pipe slices the text and displays it from the index position provided by the user.
Now that you know how to use pipes and their functionalities, let us show you how to create custom pipes.
Creating Custom Pipes
Angular makes provision to create custom pipes that convert the data in the format that you desire. Angular Pipes are TypeScript classes with the @Pipe decorator. The decorator has a name property in its metadata that specifies the Pipe and how and where it is used.
Attached below we’ve added the screenshot of the code that Angular has for the uppercase pipe.
Pipe implements the PipeTransform interface. As the name suggests, it receives the value and transforms it into the desired format with the help of a transform() method.
Here are the general steps to create a custom pipe:
- Create a TypeScript Class with an export keyword.
- Decorate it with the @Pipe decorator and pass the name property to it.
- Implement the pipe transform interface in the class.
- Implement the transform method imposed due to the interface.
- Return the transformed data with the pipe.
- Add this pipe class to the declarations array of the module where you want to use it.
Alternatively, you can use the following command,
ng g pipe <nameofthepipe>
Once run, two files are created.
The pipe.ts file holds the following code.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'demopipe'
})
export class DemopipePipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
return null;
}
}
As you can see, the PipeTransform interface and the transform method have been created. We’ve highlighted it for better understanding.
For the demo purpose, we have created a pipe that reverses a given string.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'reverse'
})
export class ReversePipe implements PipeTransform {
nvalue: string
transform(value: any, ...args): any {
this.nvalue = value.split('').reverse().join('');
return this.nvalue;
}
}
Now in our app.component.html “ I” display a string and it is reverse using the pipe name
<h3>
The reverse of string is {{ "string" | reverse}}
</h3>
You can also join multiple pipes
<h3>
The reverse of string is {{ "string" | reverse | uppercase}}
</h3>
The output looks like this.
Now that you’ve learned how to create custom pipes let’s look at what pure and impure pipes are
Pure and Impure Pipes
Pipes in Angular are classified into Pure and Impure types. Let’s have a closer look at them.
Pure Pipes
These pipes use pure functions. As a result of this, the pipe doesn’t use any internal state and the output remains the same as long as the parameters passed remain the same. Angular calls the pipe only when it detects a change in the parameters being passed. A single instance of the pure pipe is used throughout all components.
Impure Pipes
An impure pipe in Angular is called for every change detection cycle regardless of the change in the input fields. Multiple pipe instances are created for these pipes and the inputs passed to these pipes are mutable.
Although by default pipes are pure, you can specify impure pipes using the pure property as shown below.
@Pipe({
name: 'demopipe',
pure : true/false
})
export class DemopipePipe implements PipeTransform {
This brings us to the end of the article. We highly suggest that you play around with pipes to get a better understanding of the concept.
Next Steps
We hope that this article on Angular Pipes has helped you understand how to use and create pipes. If you are looking to get advanced training in Angular and perhaps make a career out of it, then you should consider getting a certification for the same.
If you have any feedback or questions on the topic, feel free to drop us a comment in the comments section of this article. We will get back to you ASAP!
