CODEWITHSUNDEEP
angulartypescript
Karma
Karma

Reputation: 2226

Currency number Format

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).

Upvotes: 2

Views: 8566

Answers (2)

deepak
deepak

Reputation: 1

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)
}

Upvotes: 0

alpham8
alpham8

Reputation: 1362

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

Upvotes: 8

Related Questions