Formatação de moeda usando pipe no Angular
Com o pipe CurrencyPipe é possível
formatar a exibição de moeda. No primeiro
parâmetro do pipe, passa-se o código da moeda
de acordo com a especificação ISO 4217 (por
padrão, USD). No segundo parâmetro, definimos
a exibição da moeda. Ela pode aceitar
os seguintes valores: 'code' (código
da moeda), 'symbol' (seu símbolo),
'symbol-narrow' (para países que possuem
múltiplos símbolos de moeda), 'string'
(para exibir qualquer string). No terceiro
parâmetro opcional, podemos definir o
formato do número, semelhante ao pipe DecimalPipe.
No quarto parâmetro opcional, pode-se
especificar o código do local utilizado:
<div>{{ value | number : código da moeda : exibição da moeda : formato do número : código do local }}</div>
Exemplos
Vamos testar o funcionamento do pipe com exemplos.
Para isso, na classe do componente, definiremos a
seguinte propriedade salary, contendo
um salário em alguma moeda:
export class AppComponent {
salary: number = 867.564;
}
Exemplo
Vamos transformar nosso número em moeda:
<div>{{ salary | currency }}</div>
Resultado da execução do código:
<div>$867.56</div>
Exemplo
Agora vamos especificar a exibição da moeda em rublos russos:
<div>{{ salary | currency:'RUB':'code' }}</div>
Resultado da execução do código:
<div>RUB867.56</div>
Exemplo
Vamos exibir ao lado do número o símbolo do rublo russo:
<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>
Resultado da execução do código:
<div>₽867.56</div>
Exemplo
Agora vamos exibir o número com quatro dígitos na parte fracionária:
<div>{{ salary | currency:'RUB':'symbol':'2.4-5' }}</div>
Resultado da execução do código:
<div>RUB867.5640</div>
Exemplo
Vamos adicionar à exibição da moeda a seguinte string:
<div>{{ salary | currency:'RUB':'this is a new currency - ' }}</div>
Resultado da execução do código:
<div>this is a new currency - 867.56</div>
Tarefas práticas
Dado o número:
salary: number = 134.89;
Formate-o da seguinte maneira:
'$134.89'
Dado o número:
salary: number = 134.89;
Formate-o da seguinte maneira:
'€134.89'
Dado o número:
salary: number = 134.89;
Formate-o da seguinte maneira:
'$134.890'
Dado o número:
salary: number = 134.89;
Formate-o da seguinte maneira:
'$0,134.8900'
Dado o número:
salary: number = 134.89;
Formate-o da seguinte maneira:
'this currency is changed 134.89'
