Create Custom Pipes – Filters in Angular 2.X +

Our applications may have a lot of data for presentation, But for creating a good user experience it is preferable to see in a more understandable format like March 12, 2010 is better to read then Mon Mar 12 2010 15:23:40 GMT-0700 (Pacific Daylight Time).

For such small and repeated tasks of transforming values in other formats we used to use Filters in AngularJS version 1, But after Angular 2 we have pipes which serve similar tasks and once defined can be used anywhere in the application.

We will discuss more Pipes using Angular’s latest stable version 7. Our todo list will have the following tasks for Pipes.

How to Create Simple Custom Pipes?
How to pass parameters in custom Pipes?
How to Use OrderBy Filter Pipe in Angular 5+ Versions?
Other Usefull Custom Angular 2+ Filters/ Pipes

How to Create Simple Custom Pipes?

First, create a new Angular application by running following in CMD Prompt using Angular CLI.

Install NodeJS then Angular CLI as follows

Create new Angular project

As now we have a new project ready, create a new file custom.pipe.ts in the app folder.

This is the simplest Pipe which we just created above. This will simply append a $ sign after value we pass then return it.

Add this pipe in app.module.ts file in declarations array.

In app.component.ts file, define some value to variable to test our Pipe.

In the app.component.html file, we can use the filter as follows

This will output as 6$

How to pass parameters in custom Pipes?

In some situations, we may need to pass some parameters with value. To pass parameters we use a colon ( : ) separated values up to any number.

for example, let’s modify above Pipe to take currency name then show output.

In HTML we will change usage as follows

How to Use OrderBy Filter Pipe in Angular 5+ Versions?

According to Angular them, new versions of doesn’t provide filters/ pipes for list ordering. They removed OrderBy filter as it was poor on performance and aggressive minification processes. You can read more about the details here.

But here we will only discuss if Angular not providing it then What to do? Don’t worry we have a solution for it 🙂 We can use nxg-order-pipe package in our application to achieve the same.

How to use Nxg Order Pipe?

This package is very simple to install and use in the application.

Step 1 – Install the package by running the following

Step 2 – Import in the app’s main module app.module.ts

Step 3 – Now its available to be used anywhere in the application.

let’s try it on some dummy Data. In app.component.ts replace the following code

In app.component.html use, OrderBy Pipe/ Filter as follows

Check more advanced usage options here

Indian Rupee (INR ) Currency Filter Pipe in Angular 2 Plus Versions

This will convert  100000000000 into  ₹1,00,00,00,00,000

Angular Pipes can be used in many ways to reuse logic and transform data on views. Check more details on Angular Pipes here

Arif Khoja
Arif Khoja is a Developer. He is a Javascript Enthusiatic who loves logical programming and has first hand experience in building a cutting edge internet product using Angular. He is also an open source freak and keen about learning and sharing. He writes Javascript both frontend and backend. He loves learning and sharing tech all the time. He also has a hands on experience in SEO and writes articles about latest emerging technologies.
Arif Khoja on FacebookArif Khoja on GoogleArif Khoja on InstagramArif Khoja on LinkedinArif Khoja on Twitter

Leave a Reply

%d bloggers like this: