Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

373
Visualizações
In angular 2, how to display a number as two decimal rounded currency?

Examples:

  • 1.99 --> $1.99
  • 1.9 --> $1.90
  • 1 --> $1.00
  • 1.005 --> $1.01
  • 1.004 --> $1.00

I am using {{num | currency:'USD':true}} but it does not show trailing 0s.

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

Use this code. Here is a working example http://plnkr.co/edit/xnN1HnJtTel6WA24GttR?p=preview {{num | currency:'USD':true:'1.2-2'}}

Explanation :
number_expression | number[:digitInfo]

Finally we get a decimal number as text. Find the description.

number_expression: An angular expression that will give output a number.

number : A pipe keyword that is used with pipe operator.

digitInfo : It defines number format.

Now we will understand how to use digitInfo. The syntax for digitInfo is as follows.

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

Find the description.

minIntegerDigits : Minimum number of integer digits. Default is 1. (in our case 1)

minFractionDigits : Minimum number of fraction digits. Default is 0. (in our case 2)

maxFractionDigits : Maximum number of fraction digits. Default is 3. (in our case 2)

over 4 years ago · Santiago Trujillo Relatório

0

well you got the correct answer but still i think i can elaborate more this answer so posting it as answer:

First of all there are number of pipes available of the angular2 to use in our project some of them are listed below

CurrencyPipe , DatePipe, UpperCasePipe, LowerCasePipe, and PercentPipe and many more.

Here as your question you have problem related to currency pipe. so i want to explain bit more as other answers.

CurrencyPipe :

A pipe may accept any number of optional parameters to fine-tune its output. We add parameters to a pipe by following the pipe name with a colon ( : ) and then the parameter value (e.g., currency:'EUR'). If our pipe accepts multiple parameters, we separate the values with colons (e.g. slice:1:5).

{{number | currency:'your_type':true:'1.2-2'}}

here...first parameter is currency type which is either EUR,USD or anything, Second parameter is true/false for the symbolDisplay which is false byDefault. then Third one is range limit basically a range limit . You can set a min and max length after the decimal point and a fixed number (or leave it blank for default) for the places before the decimal point.

I have found some good tutorials for the pipes in the angular2 which i am posting here..

http://voidcanvas.com/angular-2-pipes-filters/

https://angular.io/docs/ts/latest/guide/pipes.html

Hope it Helps and clarify more about pipes !! @Pardeep !!

over 4 years ago · Santiago Trujillo Relatório

0

You are using the correct pipe. You just need to add the digit info to the output.

{{num | currency:'USD':true}} should be...

{{num | currency:'USD':true:'1.2-2'}}

For reference: 'USD' represents the type of currency, true represents whether to show the currency symbol ($), and '1.2-2' represents the digit info.

The digit info is {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

minIntegerDigits is the minimum number of integer digits to use and defaults to 1.
minFractionDigits is the minimum number of digits after fraction and defaults to 0.
maxFractionDigits is the maximum number of digits after fraction and defaults to 3.

Source for the digit info can be found here: https://angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda