'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 .
Solution 1:[1]
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).
Solution 2:[2]
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!
Solution 3:[3]
For me it worked after importing the locale, as mentioned by Marcelo Vieira das Neves.
- Import locale in your module:
import { LOCALE_ID } from '@angular/core';
providers: [{provide: LOCALE_ID, useValue: 'pt-BR'}]
- Use the currency pipe
{{item.limite | currency:'BRL':true}}
Solution 4:[4]
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;
}
}
Solution 5:[5]
getFormattedPrice(price: number) {
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(price);
}
Solution 6:[6]
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'
Solution 7:[7]
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.
Solution 8:[8]
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
}
}
}
Solution 9:[9]
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
Solution 10:[10]
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}}
Solution 11:[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)}}
Solution 12:[12]
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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow