Formatar valor (moeda) em Angular 2+ CurrencyPipe

O Angular fornece um recurso chamado CurrencyPipe que nos ajuda na tarefa de formatar números em moedas. Sua utilização é extremamente simples e ajuda bastante nessa tarefa bem comum de quem lida com frontend.

Se você não está familiarizado com a utilização de pipe no Angular, dê uma lida nos seguintes artigos antes:

• https://consolelog.com.br/como-construir-um-pipe-para-formatar-cpf-em-um-projeto-angular2/
• https://consolelog.com.br/filtro-de-tabela-utilizando-pipetransform-e-debouncetime-angular2/

Considere a classe AppComponent:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
})
export class AppComponent  {
  valor1: number = 19.85;
  valor2: number = 12345.85;
}

Há duas variáveis do tipo number chamadas valor1 e valor2. Estas variaveis representam valores monetários, ou seja, dinheiro, então o objetivo é formatar estes valores para que o usuário final possa ver em sua tela o seguinte: R$ 19,85 e R$ 12.345,85 respectivamente.

Para efetuar esta formatação podemos utilizar o CurrencyPipe direto no template do AppComponent. Ele já se encarrega de formatar o número em moeda:

<div>{{valor1 | currency}}</div>
<div>{{valor2 | currency}}</div>

Resultado obtido na renderização do template:

O CurrencyPipe formatou os valores em moedas, porém há algumas observações:

1. Quando não indicamos, o padrão para formatação é o USD (dólar)
2. O simbolo que buscamos para representar o real é o R$ e não o $
3. As casas decimais estão separadas por . (ponto) mas no padrão brasileiro o correto é , (vírgula)
4. A , (vírgula) está sendo utilizada como agrupador de milhar, mas o que desejamos é que o . (ponto) seja utilizado como agrupador de milhar.

Indicando o símbolo da moeda no currencyCode

O CurrencyPipe tem um primeiro parâmetro chamado currencyCode, que é onde podemos indicar o código da moeda que vamos trabalhar. Nossa moeda tem como código o BRL.

As moedas estrangeiras são o principal produto em termos de negociações Forex. Existem 180 moedas no mundo que circulam em 197 países.

fonte: https://justforex.com/pt/education/currencies

Então podemos utilizar esta sigla, BRL, para indicar ao CurrencyPipe que estamos trabalhando com real (R$):

<div>{{valor1 | currency : 'BRL'}}</div>
<div>{{valor2 | currency : 'BRL'}}</div>

Avaliando o resultado abaixo podemos destacar:

1. Agora o símbolo (R$) está correto
2. Falta um espaço entre o símbolo e o primeiro número, por exemplo, R$19.85 deveria ser R$ 19,85
3. A , (vírgula) e o . (ponto) ainda estão sendo utilizados como agrupador de milhar e separador de casa decimal, o que desejamos é justamente o contrário.

Para resolver isto precisamos importar o pacote @angular/common/locales/pt e registrá-lo no AppModule da seguinte forma:

import { DEFAULT_CURRENCY_CODE, LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

// **************************************************
import ptBr from '@angular/common/locales/pt';
import { registerLocaleData } from '@angular/common';

registerLocaleData(ptBr);
// **************************************************

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [
    // ************************************
    { provide: LOCALE_ID, useValue: 'pt' },
    // ************************************
  ],
})
export class AppModule { }

Fazendo a configuração acima o resultado será modicado para:

Agora chegamos no resultado desejado. Veja como é simples formatar valores monetários utilizando o Angular.

DEFAULT_CURRENCY_CODE - Indicando a moeda padrão para o CurrencyPipe

Para melhorar um pouco mais as coisas, podemos utilizar um recurso para evitar a declaração do BRL em todos os templates. Podemos indicar ao Angular que queremos como padrão em nossa aplicação o BRL. Desta forma não seria necessário declarar o BRL sempre que utilizamos o CurrencyPipe.

Para indicar que o BRL é o padrão para a aplicação, basta adicionarmos uma configuração dentro dos providers do AppModule conforme abaixo:

// ... (código ocultado) ...

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [
    { provide: LOCALE_ID, useValue: 'pt' },
    // *************************************************
    { provide: DEFAULT_CURRENCY_CODE, useValue: 'BRL' },
    // *************************************************
  ],
})
export class AppModule { }

A configuração é bem simples, basta adicionar o provider DEFAULT_CURRENCY_CODE e atribuir o valor BRL.

Agora você pode omitir o BRL durante a utilização do seu CurrencyPipe:

<div>{{valor1 | currency}}</div>
<div>{{valor2 | currency}}</div>

Resultado:

Link com um exemplo da implementação deste artigo: