Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

CurrencyPipe

Incluir o i18n não seria mais para internacionalização de textos?

Seria errado eu fazer dessa forma?

main.ts ou app.config.ts:

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

registerLocaleData(localePt);

export const appConfig = {
  providers: [
    { provide: LOCALE_ID, useValue: 'pt-BR' }
  ]
};

Template

<span class="saldo">
  {{ 2500 | currency:'BRL' }}
</span>
1 resposta

Olá Arimar.
Tudo bem?
Sua observação faz bastante sentido.
De fato, quando falamos de i18n (internationalization), muitas pessoas associam o recurso principalmente à tradução de textos da aplicação. Porém, no Angular, a internacionalização também está relacionada à formatação de dados de acordo com a localidade configurada, incluindo datas, números, porcentagens e moedas.
A abordagem que você apresentou está correta e, inclusive, é uma prática bastante comum.
Ao registrar os dados de localização com registerLocaleData() e configurar o LOCALE_ID para "pt-BR", você informa ao Angular que os pipes de formatação devem utilizar as convenções brasileiras.
Dessa forma, ao utilizar:
{{ 2500 | currency:'BRL' }}
o valor será exibido seguindo o padrão monetário do Brasil, por exemplo:
R$ 2.500,00
Sem a configuração adequada do locale, o Angular pode utilizar o padrão da aplicação (geralmente en-US), resultando em uma formatação diferente.
Portanto, sua solução não está errada. Pelo contrário, ela demonstra que você compreendeu como o Angular utiliza a localidade para formatar dados apresentados pelos pipes.
Apenas vale destacar que existem dois conceitos relacionados:

  • Internacionalização (i18n): envolve tradução de textos e adaptação cultural da aplicação.
  • Localização (l10n): envolve a adaptação de formatos de data, moeda, números e outras convenções regionais.

No Angular, a configuração do LOCALE_ID acaba participando desse processo de internacionalização como um todo, mesmo quando estamos apenas tratando a formatação de valores.
Muito boa a sua análise crítica sobre o assunto.
Questionar o motivo das configurações e buscar alternativas é uma característica importante para evoluir como desenvolvedor.
Avise qualquer dúvida.
Bons estudos.