Angular 2 formatting currency BRL format

Question

I\'m trying to use pipe to format the price of an item in PT-BR currency format.

Here what i\'m trying to do:

{{statement         


        
                      

              相关标签:
       
      

Answer 1

I was trying to format my number to Brazilian currency using this pipe

{{p.preco | currency : 'R$' }}

and I had to put the following lines in app.module.ts in order to format the currency correctly (i.e. R$ 12,00)

import {LOCALE_ID, DEFAULT_CURRENCY_CODE} from '@angular/core';
import localePt from '@angular/common/locales/pt';
import {registerLocaleData} from '@angular/common';

registerLocaleData(localePt, 'pt');

@NgModule({
    declarations: [/*...*/],
    imports: [/*...*/],
    providers: [
        {
            provide: LOCALE_ID,
            useValue: 'pt'
        },

        /* if you don't provide the currency symbol in the pipe, 
        this is going to be the default symbol (R$) ... */
        {
            provide:  DEFAULT_CURRENCY_CODE,
            useValue: 'BRL'
        },
    ]
})

It didn't work out until I add the registerLocaleData call

It also works as expected even if you don't provide the currency symbol (R$), you should just call the pipe and angular will look for the DEFAULT_CURRENCY_CODE declared above:

{{p.preco | currency }}

I'm using angular 10, hope it helps!

Answer 2

I solved this way:

app.module.ts

import { LOCALE_ID } from '@angular/core';
import localePt from '@angular/common/locales/pt';
import {registerLocaleData} from '@angular/common';
registerLocaleData(localePt)

 providers: [{
    provide: LOCALE_ID, 
    useValue: "pt-BR"
  }],

.html

currency:'BRL' 

Answer 3

I solved with an workaround that adapts based on country:

import { Pipe, PipeTransform, LOCALE_ID, Inject } from '@angular/core';
import { getLocaleCurrencySymbol, getLocaleCurrencyName } from 
'@angular/common';

@pipe({
name: 'currencyGlobal'
})
export class CurrencyGlobalPipe implements PipeTransform {
  constructor(@Inject(LOCALE_ID) public locale: string){
  }

  transform(value: number): any {
    return getLocaleCurrencySymbol(this.locale) + new 
     Intl.NumberFormat(this.locale, { style: 'decimal', minimumFractionDigits: 2 
   }).format(value);
}

}

Couldn't use the Intl style:'currency' because the getLocaleCurrencyName doens't return the same as the documentation says it does (https://angular.io/api/common/getLocaleCurrencyName), should be 'USD' but return 'US Dollar', so I did an workaround with currencySimbol + decimal.

Maybe it can help someone else

Answer 4

in app.module.ts

`//add support to pt-BR
import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt';
registerLocaleData(localePt);
//add support to pt-BR`


`providers: [ {provide: LOCALE_ID, useValue: "pt-BR" }]//add support to pt-BR`

at the page html {{product.price| currency}}

Answer 5

For me it worked after importing the locale, as mentioned by Marcelo Vieira das Neves.

1. Import locale in your module:

import { LOCALE_ID } from '@angular/core';

providers: [{provide: LOCALE_ID, useValue: 'pt-BR'}]

2. Use the currency pipe

{{item.limite | currency:'BRL':true}}