2

I am trying to format the amount I get from my API into the locale-specific format.

In console:

Intl.NumberFormat('en-IN').format(450000) // "4,50,000"

In an Angular 2 component template:

{{ Intl.NumberFormat('en-IN').format(450000) }} // Cannot read property 'NumberFormat' of undefined

{{ 450000 | currency:'INR':true }} // ₹450,000.00

Is there a way I can get ₹4,50,000.00 without specifying the delimiters explicitly (and be able to change the locale string 'en-IN' to 'en-US' to update).

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
Karma
  • 2,196
  • 1
  • 22
  • 30

2 Answers2

8

Just use the currency pipe to keep things simple. Assuming your variable in your template is called myamount. Then just access it with

@Component({
  selector: 'currency-pipe',
  template: `<div>
    <p>Amount: {{myamount | currency:'USD':true}}</p>
  </div>`
})
export class CurrencyPipeComponent {
  myamount: number = 0.259;
}

Source and more information about the currency pipe: https://angular.io/docs/ts/latest/api/common/index/CurrencyPipe-pipe.html

You might want also to set the default culture: How to set locale in DatePipe in Angular2?

In the cookbook you may find more information about i18n and how to change it at runtime:

<script>
  // Get the locale id somehow
  document.locale = 'fr';

  // Map to the text plugin
  System.config({
    map: {
      text: 'systemjs-text-plugin.js'
    }
  });

  // Launch the app
  System.import('app').catch(function(err){ console.error(err); });
</script>

Source: https://angular.io/docs/ts/latest/cookbook/i18n.html#!#merge-with-the-jit-compiler

Community
  • 1
  • 1
alpham8
  • 1,314
  • 2
  • 14
  • 32
0

Amount Separted by Common:

Use this code in your html template

{{ separteAmount(450000)}}

and

Make a function in your .ts file

separteAmount(Number){
   return Intl.NumberFormat('en-IN').format(Number)
}
adiga
  • 34,372
  • 9
  • 61
  • 83
deepak
  • 1