In angular 2, how to display a number as two decimal rounded currency?

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


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)


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 !!