CODEWITHSUNDEEP
angular
Ryan Fonseka
Ryan Fonseka

Reputation: 255

Add 2 decimal points & thousand separator to input value Angular

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)
  }

Upvotes: 1

Views: 12571

Answers (2)

Ryan Fonseka
Ryan Fonseka

Reputation: 255

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>

Upvotes: 1

AlexElin
AlexElin

Reputation: 1570

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>

Upvotes: 1

Related Questions