Display whole number with 3 decimal places in Angular

Question

I have an Angular application which has an input field to enter number. I want to display the number with 3 decimal places if user enters any whole number. For example, if user enters 6, it should display as 6.000 as soon as user clicks outside the input field. Is there any angular way to do it?

Thanks

score 0 · Answer 1 · answered Sep 01 '21 at 06:18

0

You can use angular decimal pipe https://angular.io/api/common/DecimalPipe

valueVariable | number:'0.3-3'

answered Sep 01 '21 at 06:18

zainhassan

1,684
6
12

score 0 · Answer 2 · answered Sep 01 '21 at 06:22

0

Use parse float with precision and use an event keyup or focusout to call a function to convert the number.

<input 
    (focusout)="convert($event.target.value)"
></input>

convert(num){
  this.num = parseFloat(num).toFixed(3); //where this.num is the variable for the said number.
}

answered Sep 01 '21 at 06:22

kup

731
5
18

will it store it as Number or String? – Kirti Jha Sep 01 '21 at 06:36
toFixed returns a string value, so you will end up having a string representation of the number. – kup Sep 01 '21 at 07:01

Apoorva Chikara · Answer 3 · 2021-09-01T06:31:37.920

You can use blue event in the input field like this:

<input (blur)='addDecimals()' [(ngModel)]="usernumber"/>

In your component do this:

public usernumber;

addDecimals() {
   this.usernumber.toFixed(3); // it will be a string
}

The best way to do this is using the decimal Pipe provided by angular, but how to use it is not provided in any answer. You should do this to get it working:

<input [ngModel]="item| number:'0.3-3' " 
      (ngModelChange)="item=$event" name="inputField" type="text" />

You can check here for more details, how to use it.

Display whole number with 3 decimal places in Angular

3 Answers3