Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

372
Views
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 answers
Answer question

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 Report

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!