CODEWITHSUNDEEP
angularcurrency
Clamorious
Clamorious

Reputation: 425

Angular 2 formatting currency BRL format

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 .

Upvotes: 18

Views: 73038

Answers (13)

Diego Montania
Diego Montania

Reputation: 346

Using Angular CLI 14.2.4 you don't need any import on app.module.ts. Just use in your template.html :

{{ product.price | currency:'BRL' }}

And will work.

Upvotes: 0

Everton Costa
Everton Costa

Reputation: 650

At this moment on Angular 13.2.2 you may do like this:

app.module.ts

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

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

component.html

<div>    
   Valor: {{ valor | currency:'BRL' }}
</div>

Upvotes: 1

Felipe Ferreira Campos
Felipe Ferreira Campos

Reputation: 11

module

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

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

html

{{(price | currency)}}

Upvotes: 1

Marcel
Marcel

Reputation: 3278

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

Upvotes: 4

tva3777
tva3777

Reputation: 91

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

Upvotes: 0

s_bighead
s_bighead

Reputation: 1092

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!

Upvotes: 19

Ana Andrade
Ana Andrade

Reputation: 51

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'

Upvotes: 5

Marcelo Vieira das Neves
Marcelo Vieira das Neves

Reputation: 191

You can set the locale-id. Import the module as follows:

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

And in your module define a provider like this:

providers: [
    {
      provide: LOCALE_ID,
      useValue: "en-US"
    }
]

Just exchange for your locale ID (for IDs, refer to the Angular documentation).

Upvotes: 19

Rodrigo Moreno
Rodrigo Moreno

Reputation: 1

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

Upvotes: 0

F&#225;bio Magagnin
F&#225;bio Magagnin

Reputation: 663

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'}]

  1. Use the currency pipe

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

Upvotes: 11

Clayton K. N. Passos
Clayton K. N. Passos

Reputation: 1372

I solve....

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

@Pipe({
  name: 'currencyformat'
})
export class CurrencyFormatPipe implements PipeTransform {

  transform(value: number, currencyCode: string = 'BRL', symbolDisplay: boolean = true, digits?: string): string {
    if (!value) {
      return '';
    }

    let currencyPipe: CurrencyPipe = new CurrencyPipe('pt-BR');
    let newValue: string = currencyPipe.transform(value, currencyCode, symbolDisplay, digits);

    return newValue;
  }

}

Upvotes: 6

Eduardo
Eduardo

Reputation: 11

i solved this way:

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

@Pipe({
  name: 'currencyFormat'
})
export class CurrencyFormatPipe implements PipeTransform {
    transform(value: number, locale: string, currency_symbol: boolean, number_format: string = '1.2-2'): string {
        if (value) {

            let currencyPipe = new CurrencyPipe();
            let new_value: string;

            new_value = currencyPipe.transform(value, locale, currency_symbol, number_format);
            if (locale = 'BRL') {
                new_value = new_value.replace('.', '|').replace(',', '.').replace('|', ',');
            } 

            return new_value                                    
        }
    }
}

Upvotes: 1

Nilz11
Nilz11

Reputation: 1242

Which browser are you using, as stated in the code:

WARNING: this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and Opera browsers. For other browsers please use an polyfill, for example: [https://github.com/andyearnshaw/Intl.js/].

Probably you are best to use another library like the one they mentioned.

Upvotes: 1

Related Questions