title: Using number pipe throws InvalidPipeArgumentException (Invalid argument '1' for pipe 'DecimalPipe')
body: <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>