Add 2 decimal points & thousand separator to input value Angular

Issue

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

Solution

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 By - Ryan Fonseka