Number formatting Angular Pipe

Question

I am looking for a pipe that transforms like below, just wanted to round 2 decimal points.

I tried [ngModel]="item.value | number number:'1.0-X'", but it's not working in all cases

239.779 > 239.78
0.674 > 0.67
35355.453 > 35355.45

What do you mean *"looking for"*? In what cases did the [`DecimalPipe`](https://angular.io/api/common/DecimalPipe) not work? If you *always* want 2dp, for example, setting `minFractionDigits` to 0 doesn't make sense. — jonrsharpe, Feb 07 '19 at 23:09
I tried [ngModel]="item.value | number number:'1.2-2'", but 'minIntegerDigits' I dont know how to set since it depends the response value — Jayesh, Feb 07 '19 at 23:16
So *not* always 2dp? Did you try setting the appropriate value in the string argument? — jonrsharpe, Feb 07 '19 at 23:19
decimal points(dp) always 2, but the value before decimal(minIntegerDigits) is always different — Jayesh, Feb 07 '19 at 23:21

score 16 · Accepted Answer · answered Feb 12 '19 at 12:29

You can use DecimalPipe.

x.x-x minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1.

x.x-x minFractionDigits: The minimum number of digits after the decimal point. Default is 0.

x.x-x maxFractionDigits: The maximum number of digits after the decimal point. Default is 3.

For exactly two decimals and at least one number before decimal you can write like this:

[ngModel]="item.value | number:'1.2-2'"

or since minIntegerDigits default is 1: [ngModel]="item.value | number:'.2-2'"

If you are interested in locale-specific configurations you can read this article:

Custom Angular Pipes and Dynamic Locale

Anurag Soni · Answer 2 · 2019-10-16T06:41:43.653

Seperate the banana binding to: event (ngModelChange) and property [ngModel] parts (ngModelChange)="Rate1=$event" [ngModel]="Rate1 | number:'1.2-2' ".

where 1.2-2 is as follows:
Decimal representation options, specified by a string in the following format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

You may use it according to your requirements.

Also refer to- https://stackblitz.com/edit/decimal-pipe-example?file=app%2Fapp.component.html

Number formatting Angular Pipe

2 Answers2