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:

html<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:

app/app.component.tsexport class AppComponent {
  salary: number = 867.564;
}

Exemplo

Vamos transformar nosso número em moeda:

app/app.component.html<div>{{ salary | currency }}</div>

Resultado da execução do código:

html<div>$867.56</div>

Exemplo

Agora vamos especificar a exibição da moeda em rublos russos:

app/app.component.html<div>{{ salary | currency:'RUB':'code' }}</div>

Resultado da execução do código:

html<div>RUB867.56</div>

Exemplo

Vamos exibir ao lado do número o símbolo do rublo russo:

app/app.component.html<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>

Resultado da execução do código:

html<div>₽867.56</div>

Exemplo

Agora vamos exibir o número com quatro dígitos na parte fracionária:

app/app.component.html<div>{{ salary | currency:'RUB':'symbol':'2.4-5' }}</div>

Resultado da execução do código:

html<div>RUB867.5640</div>

Exemplo

Vamos adicionar à exibição da moeda a seguinte string:

app/app.component.html<div>{{ salary | currency:'RUB':'this is a new currency - ' }}</div>

Resultado da execução do código:

html<div>this is a new currency - 867.56</div>

Tarefas práticas

typescriptsalary: number = 134.89;

typescript'$134.89'

typescriptsalary: number = 134.89;

typescript'€134.89'

typescriptsalary: number = 134.89;

typescript'$134.890'

typescriptsalary: number = 134.89;

typescript'$0,134.8900'

typescriptsalary: number = 134.89;

typescript'this currency is changed 134.89'