Adding Two Decimal Place to Number TypeScript Angular

You've done all the work, but just haven't put the right bits together. Parsing the float works, and toFixed(2) was correctly returning a string with 2 decimal places, you just need to use them together:

parseFloat(input).toFixed(2)

Treating it as a number and formatting in the view is the correct approach.

However, you're mixing up binding & formatting, for example: [(ngModel)]="{{percent | number : '1.2-2'}}" is (very roughly!) equivalent to saying in english: bind my model to the string interpolation of...my model.

Try:

<div>{{percent | number : '1.2-2'}}</div>

There are good examples of number pipe usage in the docs: https://angular.io/api/common/DecimalPipe#example