Format float/double with Angular

For showing values up to 2 decimal places, you can use the number pipe offered by Angular.

<input type="text" name="whatever" value="{{ model.Rate | number : ‘1.2-2’ }}" />
                                    Or
<input type="text" name="whatever" value="{{ model.Rate | number : ‘1.0-2’ }}" />

The number pipe follows the following convention.

{{ Value | Number : ‘ {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} ‘}}

Here,

1. minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1.
2. minFractionDigits: The minimum number of digits after the decimal point. Default is 0.
3. maxFractionDigits: the maximum number of digits after the decimal point. Default is 3

Since we require only 2 digits after the decimal, we can use the pipe as  “number: 1.2-2”.

We set the minFractionDigits to 2 and maxFractionDigits to 2. So a value like 100 will be displayed as 100.00, and values like 100.1234 will be displayed as 100.12.

If you don’t want to see the value as 100.00, you can set the minFractionDigits to 0.

For example, {{ value | number : ‘1.0-2’ }}

You can refer to the decimal pipe docs for more information https://angular.io/api/common/DecimalPipe.