CODEWITHSUNDEEP
javascriptangularjs
Archana Sharma
Archana Sharma

Reputation: 181

INR currency format

I need to show currency format like these, how can we show.

₹1
₹10
₹100
₹1,000
₹10,000
₹1,00,000
......

Upvotes: 18

Views: 52502

Answers (23)

user2558013
user2558013

Reputation: 13

Import the Indian locale data into your Angular module:

import { LOCALE_ID } from '@angular/core';
import localeIn from '@angular/common/locales/en-IN';
import { registerLocaleData } from '@angular/common';

// Register the locale data for 'en-IN'
registerLocaleData(localeIn);

Provide the Indian locale in your module's provider array:

@NgModule({
  // ... (other module properties)
  providers: [{ provide: LOCALE_ID, useValue: 'en-IN' }],
})
export class AppModule {}

You can use it like this for crores, lacs formatting

{{ amount | currency:'INR':'symbol-narrow':'1.0-2':'en-IN' }}

Upvotes: 0

Harsh Patel
Harsh Patel

Reputation: 1344

Method 1: for Transforms a number to a INR currency string we can achieve using Angular's Currency Pipe

Step 1: import & register locales Data

import { registerLocaleData } from '@angular/common'; // import this
import { Component, OnInit } from '@angular/core';
import enIN from "@angular/common/locales/en-IN"; // // & also import this one


@Component({
  selector: 'app-price',
  templateUrl: './price.component.html',
  styleUrls: ['./price.component.scss']
})
export class PriceComponent implements OnInit {
  constructor() {
    registerLocaleData(enIN); // for register locales add this line
  }

  ngOnInit(): void {
  }
}

Now, you can use it (curreny pipe) in your HTML for inr curreny Transformation.

{{ 100000 | currency: 'INR':undefined:undefined:'en-IN' }} // ₹1,00,000.00

{{ 100000 | currency: 'USD':undefined:undefined:'en-US' }} // $100,000.00

see live demo on stackblitz

another example

credit goes to this answer's auther [I got solution about locale option (en-IN)]

Method 2: we can also convert number into locale currency format using Intnl.NumberFormat API see MDN Documenation

function tranformIntoLocaleCurrency(price, currencyCode, localeCode) {
    return new Intl.NumberFormat(localeCode, { style: 'currency', currency: currencyCode }).formatToParts(price).map(val => val.value).join('');
}

console.log( tranformIntoLocaleCurrency(100000, "INR", "en-IN")); // ₹1,00,000.00
console.log(tranformIntoLocaleCurrency(100000, "USD", "en-US")); // $100,000.00

see live working demo

Upvotes: 0

Gowthaman
Gowthaman

Reputation: 71

In your example you have set the currency being displayed but you may still using the en-US locale to process the currency value. You also need to change the locale to en-IN. See https://stackblitz.com/edit/angular-cdh8to?file=src%2Fapp%2Fapp.component.ts

This solution works, Angular is providing this by default - https://angular.io/api/common/CurrencyPipe#:~:text=is%20undefined.-,locale,-string

Credits to the comment owner - https://github.com/angular/angular/issues/40350#issuecomment-756733642

Upvotes: 0

ULLAS K
ULLAS K

Reputation: 901

If anyone is looking for the same in Angular 2, then here is solution:

  1. Create custom pipe
  2. Use in your HTML pipe code

Step 1: Create file indianCurrency.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'indianCurrency'})
export class IndianCurrency implements PipeTransform {
  transform(value: number, args: string[]): any {
     
        if (! isNaN(value)) {
            var currencySymbol = '₹';
            //var output = Number(input).toLocaleString('en-IN');   <-- This method is not working fine in all browsers!           
            var result = value.toString().split('.');

            var lastThree = result[0].substring(result[0].length - 3);
            var otherNumbers = result[0].substring(0, result[0].length - 3);
            if (otherNumbers != '')
                lastThree = ',' + lastThree;
            var output = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;
            
            if (result.length > 1) {
                output += "." + result[1];
            }            

            return currencySymbol + output;
        }
     
  }
}

Declare in app.module.ts

 declarations: [
  .....,
    IndianCurrency
  ],

Step 2: Use in your HTML

{{amount | indianCurrency}}

Upvotes: 6

Anand Khandalekar
Anand Khandalekar

Reputation: 26

If "amount" is your variable containing the number to converted to INR format, use one of the approaches given below in your html code -

1. {{ amount | currency:'INR':true}}

Result: ₹150,000.00

2. {{ amount | currency:'INR':true}}

Result: INR150,000.00

3. {{ amount.toLocaleString('en-IN')}}

Result: 1,50,000

Upvotes: -1

Niraj Singh
Niraj Singh

Reputation: 31

Use combination of comma separator pipe and Custom INR Currency PIPE

In HTML

1.first use comma separator pipe .

2.After that use custom pipe INRpipe

{{ currency_expression | number: ' ' : 'en-IN' | INRpipe }}

Pipe.ts

transform(value: string): string {

if (!value) {
  return null;
}

return `₹${value}`; // this line will only solve your problem

Below is optional

/ if you want to add two decimal point in currency /

then follow this way.

if (value.includes('.')) {

  return `₹${value}`;

}

return ₹${value}.00;

}

Upvotes: 1

Sanjay Nishad
Sanjay Nishad

Reputation: 1625

AngularJS

In HTML

{{ currency_expression | currency : symbol : fractionSize}}

for example

{{amount | currency:"₹":0}}

AngularJS docs Currency Pipe

Angular 2+

{{amount | currency:'INR':'symbol-narrow':'4.2-2'}}

you can also refer Currency Pipe

Upvotes: 20

Sanjay Pradeep
Sanjay Pradeep

Reputation: 33

I believe the currency pipe will solve this problem

Note: Syntax for digit param in the symbol is -> "numberOfInteger:minimumFractions-maxFractions"

Input: {{1499 | currency:'INR':'symbol':'1.0'}}

Output: ₹1,499

Explanation -> '1.0' means currency pipe will display at least 1 digits and no decimal.

Let me provide you with another example:

Input: {{99 | currency:'INR':'symbol':'3.2-2'}}

Output: ₹099.00

Explanation -> '3.2-2' means currency pipe will display at least 3 digits and the decimal point minimum 2 fractions & maximum 2 fractions are displayed.

Upvotes: 2

Dilshad
Dilshad

Reputation: 83


@Pipe({
  name: 'customCurrency'
})
export class CustomCurrencyPipe implements PipeTransform {

  transform(value: number, isSymbol: string, decPointer: string, isPrefix: boolean): string {

    if (!isNaN(value)) {
       var formatted_value;
      var currencyText = isSymbol;
      if (currencyText == '₹') {
        // for Indian number system
        formatted_value = new Intl.NumberFormat('en-IN').format(value)
      }
      else {
        formatted_value = new Intl.NumberFormat().format(value)
      }
      return currencyText + ' ' + formatted_value;
    }
  }

}

HTML

<div>{{ 10000000 | customCurrency:'₹':'1.0':false}}</div>

Upvotes: 2

Srikrushna
Srikrushna

Reputation: 4965

{{myobject.price | currency:'INR'}}

If you don't need last decimal value then you can use number pipe with

₹{{myobject.price | number}}

If you don't need last decimal value but you want to use the inbuilt currency pipe functionality, then you can create a custom pipe for currency or you can create a split pipe and use with currency

Ex: {{myobject.price  | currency:'INR' | custSplit:".":"0"}}

Note: custSplit- It is a custom pipe it split the string what ever we pass (here- ".") and take the index what we need(Here- "0"Index).

For more on pipe, read angular 2+ doc

Upvotes: 1

Inderjeet
Inderjeet

Reputation: 1528

Indian currency short like if you want to currency view like ₹ 2.5 Lakh, ₹ 3 Cr, ₹12 Lakh etc then use below Pipe. It will work

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'pricePipe'
})
export class PricePipePipe implements PipeTransform {

  transform(value: number, args: string[]): any {

    if (! isNaN(value)) {
        var currencySymbol = '₹';
        if (value == null) {
          return '';
      }
      var InrRSOut = value;
      InrRSOut = Math.round(InrRSOut);
      var RV = "";
      if (InrRSOut > 0 && InrRSOut < 1000) {
          RV = InrRSOut.toString();
      }
      else if (InrRSOut >= 1000 && InrRSOut < 10000) {
          RV = InrRSOut.toString();
      }
      else if (InrRSOut >= 10000 && InrRSOut < 100000) {
          var f1 = InrRSOut.toString().substring(0, 2);
          var f2 = InrRSOut.toString().substring(2, 5);
          RV = f1 + "," + f2;

      }
      else if (InrRSOut >= 100000 && InrRSOut < 1000000) {
          var f1 = InrRSOut.toString().substring(0, 1);
          var f2 = InrRSOut.toString().substring(1, 3);
          if (f2 == "00") {
              RV = f1 + " Lacs";
          }
          else {
              RV = f1 + "." + f2 + " Lacs";
          }
      }
      else if (InrRSOut >= 1000000 && InrRSOut < 10000000) {
          var f1 = InrRSOut.toString().substring(0, 2);
          var f2 = InrRSOut.toString().substring(2, 4);
          if (f2 == "00") {
              RV = f1 + " Lacs";
          }
          else {
              RV = f1 + "." + f2 + " Lacs";
          }
      }
      else if (InrRSOut >= 10000000 && InrRSOut < 100000000) {
          var f1 = InrRSOut.toString().substring(0, 1);
          var f2 = InrRSOut.toString().substring(1, 3);
          if (f2 == "00") {
              RV = f1 + " Cr";
          }
          else {
              RV = f1 + "." + f2 + " Cr";
          }
      }
      else if (InrRSOut >= 100000000 && InrRSOut < 1000000000) {
          var f1 = InrRSOut.toString().substring(0, 2);
          var f2 = InrRSOut.toString().substring(2, 4);
          if (f2 == "00") {
              RV = f1 + " Cr";
          }
          else {
              RV = f1 + "." + f2 + " Cr";
          }
      }
      else if (InrRSOut >= 1000000000 && InrRSOut < 10000000000) {
          var f1 = InrRSOut.toString().substring(0, 3);
          var f2 = InrRSOut.toString().substring(3, 5);
          if (f2 == "00") {
              RV = f1 + " Cr";
          }
          else {
              RV = f1 + "." + f2 + " Cr";
          }
      }
      else if (InrRSOut >= 10000000000) {
          var f1 = InrRSOut.toString().substring(0, 4);
          var f2 = InrRSOut.toString().substring(6, 8);
          if (f2 == "00") {
              RV = f1 + " Cr";
          }
          else {
              RV = f1 + "." + f2 + " Cr";
          }
      }
      else {
          RV = InrRSOut.toString();
      }
      return currencySymbol + RV;
    }

}

}

In HTML Use like

{{ 125000000 | pricePipe }}

Output

₹12.50 Cr

Upvotes: 5

Deep Adhia
Deep Adhia

Reputation: 392

You can format currency in INR with using pipe and even removing decimal value (i.e Paise) like 

{{bal.walletamt | currency:"₹ " : false : '2.0-0'}}

this code will work for ionic3 also

Upvotes: 1

James Eames
James Eames

Reputation: 41

I know it's a bit late, but you can just use https://osrec.github.io/currencyFormatter.js/ which handles

Then all you need is:

// Outputs ₹ 25,34,234.00
OSREC.CurrencyFormatter.format(2534234, { currency: 'INR' });

Upvotes: 1

Satish
Satish

Reputation: 726

For display amount with two digits after decimal ...

Try this:

var num=1234.567;
 var ans= num.toLocaleString('en-IN',{ style: 'currency', currency: "INR",minimumFractionDigits:2,maximumFractionDigits:2 });

//output
//₹ 1,234.57

Upvotes: 1

Suhel
Suhel

Reputation: 957

Just use INR in currency filter

{{product.product_cost | currency:'INR':true}}

Upvotes: 8

Ashok Koyi
Ashok Koyi

Reputation: 5417

  1. Get the digits before last three.
  2. Replace the rest of the digits with prefix.replace(/\B(?=(?:\d{2})+(?!\d))/g, ",")
  3. Combine the above section with this modified prefix

Complete explanation on why this regex places commas at the right place is is mentioned here.

Upvotes: 0

UniCoder
UniCoder

Reputation: 3243

You can use this : {{amount:| currency:"₹"}} or you can use hex code for "₹"

Input: {{3*100000000 | currency:"₹"}}

Output: ₹300,000,000.00

Upvotes: -1

Edison D&#39;souza
Edison D&#39;souza

Reputation: 4640

Just add currency filter like this.

 {{object.price | currency:"INR":true}}

Upvotes: 0

Rohit Arya
Rohit Arya

Reputation: 6791

To print the rupee symbol(₹), try like this:

{{price | currency:"&#8377;"}}

For more formatting, refer this.

Upvotes: 4

Himanshu Mishra
Himanshu Mishra

Reputation: 93

You can make a filter using toLocaleString like :

Number(data).toLocaleString('en-IN', { style: 'currency', currency: 'INR', maximumFractionDigits: 0})

Filter example :

.filter('IndianCurrency', function() {
    return function(data) {
        if (null != data) {
            return Number(data).toLocaleString('en-IN', { style: 'currency', currency: 'INR', maximumFractionDigits: 0});
        } else {
            return Number(0).toLocaleString('en-IN', { style: 'currency',currency: 'INR', maximumFractionDigits: 0});
        }
    };
});

Usage :

{{ rent | IndianCurrency }}

Upvotes: 5

codeninja.sj
codeninja.sj

Reputation: 4129

Indian rupee follows different format compare to US currency; So, don't use default angular currency filter to format Indian Rupees

Custom INR Currency Filter

var app = angular.module('app', []);

app.controller('indexCtrl', function ($scope) {
    $scope.amount = 10000000.33;
});

app.filter('INR', function () {        
    return function (input) {
        if (! isNaN(input)) {
            var currencySymbol = '₹';
            //var output = Number(input).toLocaleString('en-IN');   <-- This method is not working fine in all browsers!           
            var result = input.toString().split('.');

            var lastThree = result[0].substring(result[0].length - 3);
            var otherNumbers = result[0].substring(0, result[0].length - 3);
            if (otherNumbers != '')
                lastThree = ',' + lastThree;
            var output = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;
            
            if (result.length > 1) {
                output += "." + result[1];
            }            

            return currencySymbol + output;
        }
    }
});
<!DOCTYPE html>
<html ng-app="app">
<head>    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="indexCtrl">
    Input: <input type="text" ng-model="amount">
    <h3>{{amount | INR}}</h3>
</body>
</html>

Upvotes: 16

Naga Sandeep
Naga Sandeep

Reputation: 1431

In angular, Create a custom filter like this

myApp.filter('ic', function()
{
   return function(value)
   {
       return '₹ ' + value;
   }
});

And then you can {{data|number|ic}}

Upvotes: -1

Paresh Gami
Paresh Gami

Reputation: 4792

Try this one

var x=1000;
x=x.toString();
var lastThree = x.substring(x.length-3);
var otherNumbers = x.substring(0,x.length-3);
if(otherNumbers != '')
    lastThree = ',' + lastThree;
var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;

alert(res);

Upvotes: 1

Related Questions