Pipes in Angular: How to Create, Implement and Customise

Read it in 8 Mins

16th Feb, 2023
Pipes in Angular: How to Create, Implement and Customise

What are Angular Pipes?

Angular pipes are a source to reflect the transformations made within the template. They transform the data into a presentable form and make the HTML templates more attractive. The AngularJS pipes do not change the data value.

For more details and expert guidance, you can refer to the angular best course to learn everything related to this framework.

Here, we will discuss everything that corresponds to the angular pipes. Its classification, sub-types, usage, etc. 

Built-in Angular Pipes 

AngularJS lists various built-in pipes used to perform various tasks. Every pipe has a function used to solve different problems. Using the built-in angular bootstrap pipes makes it easier for the developers to work and make their code readable and stable. Below is a list of all the built-in angular pipes the language offers. We will understand each one of them in detail.

1. JSON Pipe

The Angular JSON pipe converts a specific value or an object into a JSON string formatted together. The input is synced from the server, then binded with the HTML files. The developer tool’s network tab within the browser identifies the JSON data fetched from the server. It even helps to debug the codes written within the JSON files. The JSON pipes make it a quick process as it displays the actual JSON data on the HTML file.

The syntax of the JSON pipe is like other angular pipes. The pipe operator is appended after the object. It looks something like this-

{{ json_object | json }} 

2. Upper Case Pipe

As the name suggests, the Upper Case Pipe is used to convert a string of the letters in the upper case. The user must pass the string into the Upper case pipe function, and it will return the modified string.

The syntax of the Upper case pipe is shown below 

{{ string | uppercase }} 

3. Lower Case Pip 

The Lower case pipe converts the string or a text in the lower case. The modification is reflected within the component template. You can just pass the text into the lower case pipe using the operator to get the derided output. 

Its syntax is as follows- 

{{ text | lowercase }} 

4. Custom Pipe 

Custom pipes are used to make your code reusable. You can wrap up the content within the custom pipe and use it again n again within the angular framework.

5. Date pipe 

The Angularmaterial date pipe offers various date formats that can be either from the predefined formats or the custom formats. You can provide the input as an object, ISO date string, or even milliseconds. The method will then return the suitable date format used within your code.

6. Async pipe 

Async pipe is an example of an impure pipe that waits for a request to display the data. Alternatively, it emits the value through an observable event. It returns the latest value which has been emitted successfully.

To be an advanced full-stack developer, you can refer to the online certificate in web development course. 

Custom Pipes in Angular 

The essential operation of the pipe transform method is to transform a single value into a new one. At the same time, the value could be of either data type such as an array, string, object, or integer. You can create your custom pipes in angularcli to perform the desired operation.

Pure and Impure Pipes

These are the two main categories of angular pipes.

The pure pipe is a pipe called when a pure change is detected in the value. It is called fewer times than the latter. 

Impure pipe- This pipe is often called after every change detection. Be it a pure change or not, the impure pipe is called repeatedly.

Creating a Custom Pipe 

Angular 2 has a unique feature that allows the developers to create custom pipes. Custom pipes are a way to change the existing values within the Angular template. 

1. The general way to define a custom class is as follows. Here we have a few lines of code that describe how you can create your custom pipe.

The different methods written within the code are used for the following functionalities, which are as follows- 

  • Pipename − This method defines the name of the pipe. 
  • Returntype −It is the return type of the pipe. 
  • Pipeclass − It represents the name of the class assigned to the custom pipe. 
  • Parameters are the parameters passed to the pipe for performing specific functions. 
  • Transform −It is the function of the pipe on which the developers work. 

2. We will create a custom class to multiply two numbers. The pipe will be used within the component class. Let us create this class from scratch with all the steps. 

  • You first need to create a new file with any name of your choice. The file must have a .pipe.ts extension. You could name it something like multiplier.pipe.ts.
  • Now, import all the necessary classes and then create the multiplier class. 
  • Here we have shared a code with all those classes implemented together. You can refer to it to create your custom pipe.
  • You need to notice some important things within the above code.
  • At first, the pipe and pipe transform modules are to be imported to use their features. 
  • Then we created a pipe with a name similar to the class name.
  • The multiplier pipe class implements the pipe transform module to use the methods within the module.
  • At last, the transform function will receive values and parameters and ultimately return the modified value.

3. See an app.ts file, which is listed in the File menu. Create a component class, and import the essential built-in classes. Refer to the below code. 

4. Once done, now open the app—module. ts file and import the necessary modules within the module.ts file. Take help from the below code and use it in your custom pipe. 

Pipe and PipeTransform 

The pipe transform is more like a method used by the pipe to initiate the transformation. The pipe then calls for the transform method with a binding value passed as an argument. Along with these, we have an extra parameter known to be the second argument in the method.

This is how you use the pipe transform method. 

Pipe Transform Value 

The pipe transform method takes two parameters. The first one is a value and the second one is an argument. You could pass them as per the convenience to transform the specific input values.

Pipes with Arguments 

You can pass multiple arguments to your custom-made pipe. The arguments are separated by a semicolon (:) 

Custom Pipes Examples

Custom pipes are used in various fields. So, let’s discuss some of the examples of a custom pipe. It is the temperature converter custom pipe. Let us look at how to design it. 

Create a file with a relevant name right under the src/app folder. You can make it similar to temp-con.pipe.ts. Here’s the code that you must follow 

Testing Pipes 

The developers have the power to test the pipes without using Angular’s in-built testing functions.

Any function using the regular expression needs to be tested to ensure that everything works fine. You must write a DOM code to identify whether your custom pipe works fine. 


So, here comes an end to this. We have discussed every aspect related to the angular bootstrap pipes. We have shared all the related codes and examples necessary for you to learn. You can refer to them as an example to deeply learn more about the angular pipes.

Also, we have this beneficial course KnowledgeHut’s angular best course. It is a complete guide for beginners with all the topics explained in brief. You can learn all the basic and essential topics sufficient to learn the core concepts of AngularJS. So, check the course out and be an Angular expert.


Binod Anand

Blog Author

A content marketing analyst, Binod’s area of interest is EdTech, marketing analytics, and digital marketing. He is also a professional blogger and writes extensively on skill development. His hobbies include travelling, programming, and watching sitcoms.

Share This Article
Want to become a sought-after web developer?

Avail your free 1:1 mentorship session.

Your Message (Optional)

Frequently Asked Questions (FAQs)

1What are the different types of pipes in Angular?

 In angular, there are two main categories of pipes available for usage. They are- pure pipes and impure pipes.

2How many pipes are there in Angular?

There are various pipes in angularmaterial. Some of them are- Json pipes, Upper case pipes, lower case pipes, async pipes, date pipes, etc.

3What is the pipe method?

The pipe method in AngularJS is used to combine multiple functions into a single one. It can take single or multiple functions as the parameters and then transforms the arguments into various collections.

4What is pipe and tap in angular?

The pipe is used to connect the tap operator, which displays the source values on the console. We can even use the console.log function directly within the tap operator.

5What is pipe and map in angular?

The AngularCLI map is an operator that takes input. It then applies various functions to each input and then modifies them into a new one.

6What is date pipe in angular?

The date pipes in angular material are used to set and format the dates in the framework. The dates are set as per the mentioned date formats, timezone, and the locale information of a specific country or region. 

Upcoming Web Development Batches & Dates

NameDateFeeKnow more