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
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.
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.
Today is Sep 25, 2020Or if you prefer, 09/25/2020The time is 2:16 PMDate from time stamp is Sep 25, 2020, 2:11:19 PM
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.
ng generate pipe replace-null-with-text
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.
Book Name : Awesome BookAuthor Name : Author Name Not AvailablePublished at : Published Date Not AvailablePrice: N/A
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.