Create Custom Pipe in Angular to Replace Null Value With a Text

Basic pipe overview and step by step process to create a custom pipe in Angular

Milton Marma
Oct 6 · 4 min read

A Little Bit Of Background

Pipe in Angular is a way to transform data in the HTML template. It doesn’t change the value of the data in the TypeScript file. A pipe takes in data as input and transforms it into the desired output. A good use case of the pipes is in transforming date format. Generally, the date-time format we get from the API data is not the format that we want to show the users. That’s when we can use the pipes to transform the data into the desired format.

Image for post
Image for post
Photo by Oskar Yildiz on Unsplash

Built-in Pipes

Angular provides built-in pipes for typical data transformations e.g. DatePipe, UpperCasePipe, LowerCasePipe, etc. so that we can transform our data into the desired format in the HTML template. Now, let’s see some examples with DatePipe.

In the below code(a slightly modified version of the official example), we are using the date pipe. We have to place the pipe after a vertical line(|) in the template expression.

A pipe can accept optional parameters to modify the output. To pass parameters to a pipe, simply add a colon and the parameter value to the end of the pipe expression. In the below code, we are passing ‘shortTime’, ‘medium’ as a parameter for the date pipe.

We will get the below output in the browser.

Motivation for Our Custom Pipe

We all love to give users the best user experience possible. So, if a value is null users won’t see anything in the browser. Not a good user experience. We will solve that problem by creating our own custom pipe that will replace the null or undefined value with a given text in the template expression.

Let’s Create Our Custom Pipe

We will use Angular CLI to create our own custom pipe using the below command.

Angular CLI will generate a skeleton file for our custom pipe.

The name specified in the @Pipe decorator is the name of the pipe (e.g. replaceNullWithText). We will use that name in HTML like the date pipe example.

In the transform method, the value parameter is the value we get from the HTML template, and args is the optional parameter we want to send to our custom pipe. Note that, you don’t have to use the same parameter name but remember that parameter position matters. The first parameter will always get the value from the HTML template and at least one parameter is mandatory.

If you are creating the pipe inside an Angular module like SharedModule then don’t forget to export it from the module.ts file otherwise you won’t be able to use it in the other modules. Or if you are not using Angular CLI to generate the skeleton file then you have to add the custom pipe class name in the module declarations too.

For our custom pipe, we want it to return a text value that we will pass from the template expression as a parameter when the value from the HTML template is null. So, in the below code we are checking the value from the HTML template is null or undefined. If the value is null/undefined then we are returning the replaceText parameter value or we are returning the same value.

We also added a default value ‘N/A’ for replaceText. So, if we don’t pass any parameter from our HTML template then for null/undefined value our custom pipe will return ‘N/A’.

Now Let’s see our custom pipe in action. 😃

We will get the following output in our browser.

The book variable is not null so, our custom pipe won’t change the value and we won’t see any kind of transformation of book value in the output. But as our author and publishedAt value are null, our custom pipe will return the replaceText value which we passed from the HTML template as a parameter for our custom pipe, and for price we didn’t pass any parameter value to replace the null, so our custom pipe is returning the default replace text value which is ‘N/A’.

Yeah! 😃 We got our custom pipe in Angular.

I am also learning Angular almost every day. So, if I made any mistake please feel free to correct me and put your suggestions in the comment section.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store