[Fixed] Formatting an Angular Material Form Field Number to 2 Decimal Places?

Issue

If we have an Angular Material Form Field containing number like this:

<mat-form-field>
  <input matInput
    readonly
    type="number"
    formControlName="unitsFulfilled"
    placeholder="Units Fulfilled">
</mat-form-field>

How do we format it to 2 decimal places. Do we need to do it on the number itself before assigning to the control via formControlName?

Solution

You can simply use the create a directive and use it in the HTML. Kindly refer the following link for the same.

Allow only two decimal places

In an example, there is simple input field. But you can also use it with the material UI components.