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:

<div class="desc">{{statement.price | currency:'BRL':true:'1.2-2'}} </div>  

The result that i expect is 33.111,00 and now is returning 33,111.00 .

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

getFormattedPrice(price: number) {
    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(price);
}