Add 2 decimal points & thousand separator to input value Angular

Question

I want to show 2 decimal places & a thousand separators to my input tag. I have tried few methods but failed. following is my code

HTML

<input  type="number" class="form-control" [value]='totalCollected'  readonly>

Component.ts

export class PaymentListComponent implements OnInit {
  totalCollected = 0.00;
  totalOutstanding = 0.00;
}

  calculateTotal(){
    this.totalCollected = this.psList.reduce((accumulator, current) => accumulator + current.CashValue + current.ChequeValue + current.CrediNoteValue, 0)
    console.log('collected' + this.totalCollected)
    this.totalOutstanding = this.psList.reduce((accumulator, current) => accumulator + current.NetValue - (current.CashValue + current.ChequeValue + current.CrediNoteValue), 0)
    console.log('Outstanding' + this.totalOutstanding)
  }

AlexElin · Answer 1 · 2021-10-25T09:07:14.003

1

You need to use DecimalPipe.
Its parameteres are digitsInfo which specfies format and locale which determines thousands separator.
locale should be set to the one which have a thousand separator what you need.
In the below example 2 decimal places and a space as separator will be displayed.

<input  type="number" class="form-control" [value]="totalCollected | number: '6.2-2' : 'fr-FR'"  readonly>

edited Oct 25 '21 at 09:07

answered Oct 25 '21 at 07:53

AlexElin

1,044
14
23

this is not working for my code. get an error in console `The specified value "101,510.6" cannot be parsed, or is out of range.` – Ryan Fonseka Oct 25 '21 at 08:30
Configure the first digit in the format (it's minimum number of integer digits before the decimal point) as you need. In your case it looks like the 6 would be enough. I've updated the example. Pls, take a look – AlexElin Oct 25 '21 at 09:06
Still getting an error in console `ERROR Error: InvalidPipeArgument: 'Missing locale data for the locale "fr-FR".' for pipe 'DecimalPipe'` . and the value isn't showing in the input field – Ryan Fonseka Oct 26 '21 at 11:48
You need to import locale. See the following answer how to do it https://stackoverflow.com/a/48409743/12488082 – AlexElin Oct 26 '21 at 13:17

score 1 · Accepted Answer · answered Oct 27 '21 at 12:07

1

The correct way is

HTML needs to use type as "text" & [value] to [ngModel]

<input  type="text" class="form-control" [ngModel]="totalCollected | number : '1.2-2'"  readonly>

answered Oct 27 '21 at 12:07

Ryan Fonseka

233
5
20

Add 2 decimal points & thousand separator to input value Angular

2 Answers2