I am working on an Angular 4 app where i need to show amounts on inputs, these amounds have usually more than two decimals i.e. 34.3899019 but I need to show only the first two decimals: 34.38.

I have managed to do so by creating my own pipe:

import {Pipe, PipeTransform} from "@angular/core"; @Pipe({ name: 'TrimDecimalPipe'}) export class TrimDecimalPipe implements PipeTransform{ transform(val) { return val.toFixed(2); } } 

And using it like this:

<input type="number" [ngModel]="payment.card.Amount | TrimDecimalPipe" (ngModelChange)="payment.card.Amount=$event" class="form-control" /> 

Something important: this input has to implement two way data binding such as my html example or [(ngModel)].

This works but it messes up when I try to modify the amount on the input, maybe because of my pipe reacting as I type.

Thanks in advance.

I am working on an Angular 4 app where i need to show amounts on inputs, these amounds have usually more than two decimals i.e. 34.3899019 but I need to show only the first two decimals: 34.38.

I have managed to do so by creating my own pipe:

import {Pipe, PipeTransform} from "@angular/core"; @Pipe({ name: 'TrimDecimalPipe'}) export class TrimDecimalPipe implements PipeTransform{ transform(val) { return val.toFixed(2); } } 

And using it like this:

<input type="number" [ngModel]="payment.card.Amount | TrimDecimalPipe" (ngModelChange)="payment.card.Amount=$event" class="form-control" /> 

Something important: this input has to implement two way data binding such as my html example or [(ngModel)].

This works but it messes up when I try to modify the amount on the input, maybe because of my pipe reacting as I type.