Using the number @Pipe you should be able to achieve this.

<input [ngModel]="minimumRange | number : '1.1-2'" min="1" (ngModelChange)="minimumRange=$event" placeholder="0.0" step="0.1" type="number">

For more info:

• What are the parameters for the number Pipe - Angular 2
• http://www.concretepage.com/angular-2/angular-2-decimal-pipe-percent-pipe-and-currency-pipe-example

Hope it helped! Good coding bro!

Update:

If we use @Pipe in model like this:

<input [(ngModel)]="myModel| uppercase">

It will throw the following error:

Parser Error: Cannot have a pipe in an action expression at column X

We will just need to change it to this:

<input [ngModel]="myModel| uppercase" (ngModelChange)="myModel=$event">

Update2:

Added (ngModelChange)="minimumRange=$event" to keep the two way binding functionality.

As @n00dle pointed me, removing the () removes the 2 way binding functionality. So the way to use @Pipe in a 2-way-binding would be using also (ngModelChange).

This could be of huge use:

• Using Pipes within ngModel on INPUT Elements in Angular2-View

try this

<input [(ngModel)]="minimumRange" min="1" placeholder="0.0" step="0.1" type="number" (keyup)='conversion()'>

conversion(){
  this.minimumRange = this.minimumRangex.toPrecision(2);
}