Localização no AngularJS

Leandro Parazito
GDG Pato Branco
Published in
2 min readFeb 25, 2016

Quando você trabalha com filtros como currency (moeda) ou date (data) no AngularJS, você vai acabar mascarando o valor para o formato do Brasil.

No Angular, existe uma maneira bem simples de se tratar isso. É fazendo uso da Localização (em inglês Localization ou L10n).

O que é Localização?

É o processo de adaptação de um produto para uma língua e cultura de um país ou região específica. Adicionando componentes específicos como datas, números e moeda.

Por que L10n?

Entre a letra L e a letra N da palavra Localization existem 10 letras. Sendo assim chamado de L10n.

Exemplo em Angular

Existe uma lista de produtos que mostra o nome e o valor de um produto. Dessa forma:

Agora vamos aplicar o filtro currency para exibir o valor monetário. Assim:

Você vai notar que cada valor começa com um cifrão ($), seguido do valor do produto. Não está no formato brasileiro, mas sim no formato americano.

Vamos ajustar para exibir em reais. Segue:

Agora o R$ aparece antes de cada valor do produto. Mas ainda temos um pequeno problema.

No Brasil, utilizamos a vírgula para separador decimal e ponto como separador de milhares. É o oposto do formato americano.

Felizmente, há uma solução fácil para esse tipo de problema comum. Os caras do Angular criaram um módulo específico chamado ngLocale pra esse tipo de situação.

Você pode dar uma olhada no arquivo aqui. Vamos adicionar esse arquivo no nosso projeto. O valor vai ficar dessa forma:

R$ 1,99

Você pode conferir o exemplo desse projeto nesse repositório. Qualquer dúvida é só gritar.

Referências

--

--