Using number pipe throws InvalidPipeArgumentException (Invalid argument '1' for pipe 'DecimalPipe')
<p>I want to write some number into <code>&lt;input&gt;</code> and dynamically display it as a decimal inside <code>{{}}</code> through pipe. It throws exception instead. Here's my code:</p>

<p>app.template.html:</p>

<pre><code>&lt;h1&gt;amount = {{amount|number:'1.2-2'}}&lt;/h1&gt;
&lt;input [(ngModel)]="amount"/&gt;
</code></pre>

<p>app.component.ts:</p>

<pre><code>import {Component} from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})
export class AppComponent {
  private amount:number;
}
</code></pre>

<p>Plunker: <a href="http://plnkr.co/edit/I7ynnwBX4DWJfHNPIPRu?p=preview" rel="noreferrer">http://plnkr.co/edit/I7ynnwBX4DWJfHNPIPRu?p=preview</a></p>

<p>Write any number into the input and see exception being thrown in the console.</p>

<hr>

<p><strong>Edit:</strong></p>

<p>Working code as per rinukkusu suggestion:</p>

<p>app.template.html:</p>

<pre><code>&lt;h1&gt;amount = {{amount|number:'1.2-2'}}&lt;/h1&gt;
&lt;input [ngModel]="amount" (ngModelChange)="onChange($event)"/&gt;
</code></pre>

<p>app.component.ts:</p>

<pre><code>import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})
export class AppComponent {
  private amount:number;

  onChange($event) {
    this.amount = +$event;
  }
}
</code></pre>

<p>This <code>+</code> next to <code>$event</code> is very important and what makes conversion from string to number possible!</p>