Nov 22

Custom Pipe Currency INR Example Angular 2/4

Custom Pipe Currency INR Example for Angular 2/4

Angular 2-Zappmania

I have seen many queries for displaying Indian Currency as “INR” or “₹” in Angular 2/4
By Default Angular Currency Pipe has default Currency set as USD even if we pass INR as the desired Currency Symbol it returns USD/$ as the prefix.

Also, It does not have an option(s) to show currency as prefix or suffix.
Below example shows how to counter above shortcomings.

We will be creating Custom Pipe for Angular2/4 for this let’s create a new TypeScript file named “indianCurrency.pipe.ts”.
Add below code to newly created TypeScript file:

Next we need to add this in “app.module.ts”

Next Add this component to declaration :

Save all files.

Now we can use this where ever we need this as a currency.


In the above code you will notice that we have not passed the value in parameter, That’s because it will be passed automatically from “employee.annualSalary”.

Thanks, Hope this basic example for “Custom Pipe Currency INR” will help you guys.
Let me know me know in case you have any other queries.

Permanent link to this article:

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.