In this article, we will take a look at one of the coolest features that the Angular framework provides i.e. the pipes. Due to its contribution to building Single Page Applications (SPAs), components have acquired major importance in Angular and other similar front-end frameworks and libraries. With the introduction of components, there occurred the need for inter-component communication and several other use cases to decorate the raw data which is involved in two-way communication. One such use case is that of a pipe. So let’s begin with our journey of exploring pipes in Angular!

What is Angular?

Angular is one of the widely used front-end web application development frameworks. As mentioned in the introduction, it operates on the primary idea of creating components and hence facilitates the development of Single Page Applications (SPAs). If you wish to learn more about components in Angular, you can give a read to our detailed tutorial on understanding components in Angular.

What are Pipes in Angular?

Pipes are extremely vital entities while developing applications using Angular. Back in the days of AngularJS, they were called filters. The primary objective of a pipe is to take a data input and apply a certain set of custom transformations on that data and return the transformed data back again. The introduction of pipes has eased down the work of developers by facilitating them with better code readability, reusability, reliability, and effectiveness. 

Pipes come with several interesting and fascinating use cases including instant, as well as, delayed data transformations. Make sure to check out some interesting use cases of Angular pipes here.

There exist some helpful built-in pipes in Angular. Some of them are CurrencyPipe, DatePipe, DecimalPipe, JsonPipe, LowerCasePipe, UpperCasePipe, PercentPipe, SlicePipe, AsyncPipe, etc. Apart from these built-in pipes, Angular provides the ease of implementing customized pipes as per our own application use cases. The latter part of this article will teach you how you can create your own customized pipes in Angular. 

Angular pipes do not exist stand-alone. In order to create and utilize them, we first need to initiate an Angular project. We can create a new Angular project learning-angular by running the following command in the console window.

ng new learning-angular

If you face any issues while creating the project, you can see our detailed guide on creating an Angular project here.

Creating Customized Pipes

To generate a new pipe, navigate to the project directory, and run ng generate pipe <your_pipe_name>.

ng generate pipe my-first-pipe/my-first-pipe

The above command will create a new pipe my-first-pipe in ./src/app/ as shown below.

Navigate into my-first-pipe folder. You will see two .ts files as shown below.

In the next section, we will learn in detail about these default files.

Understanding the Pipe File Structure

“Hey, Emad! I am unable to understand why Angular generated these files. Please help!” I hear you. The latter portion of this tutorial is dedicated exactly to address this query. There is no need to worry. Let’s discuss each of the above files step by step. 

1. my-first-service.service.spec.ts

Angular creates this file for unit testing. Unit testing is one of the popular ways to test modules the modules we develop. In our case, this file is used to write code for unit testing of our pipe class. Although, it is always a good practice to write unit tests, but if you’re a beginner in Angular, you can skip this file for now. We will come back to this file again when we study unit testing in detail. If you wish to know more about the unit tests, you may read about them in great detail here.

2. my-first-service.service.ts

This is the file in which actual code related to pipe development is written. Let’s look at the default boilerplate code in this file. 

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'myFirstPipe'
})
export class MyFirstPipePipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

Let’s break down this code piece and look at individual statements step by step. On line 1, we are just importing a couple of dependencies from the @angular/core module. The Pipe is a decorator whereas PipeTransform is the interface that has the declaration to transform function. On line 6, we are declaring the class MyFirstPipePipe and inheriting it from the PipeTransform interface in order to make this class behave as a pipe. The export keyword allows the usage of this class from anywhere outside this file in the application. Since we inherited this class from the PipeTransform interface, we are now bound to provide the implementation of transform function. From lines 8 to 10, we are exactly doing that. The default code currently just returns null. This the part where we will be writing our custom code for this pipe.

You might be wondering about the signature of transform function. Let’s at it now! The transform function expects two parameters as input; the original data value and a list of arguments to apply certain kinds of transformations on the original data value. The unknown keyword means that the function is not data type dependent. It can take any value of any data type as an input and apply the requested transformations on that data. 

From lines 3 to 5, we are decorating our class with the Pipe decorator so that we can use it as per the syntax of pipe in the application. 

Wrapping Up

This was the overall synopsis of creating pipes in Angular. In this article, we learned to create pipes and understood the default boilerplate code inside the pipe file. I hope after reading this article, you have some idea about pipes in Angular.

Feel free to share your thoughts in the comments section below. If you wish to learn more about Angular, you can check out our collection of Angular tutorials.