title: Apply pipe to display value of md-input
body: <p>I have a form in my Angular 2 Material application with a price:</p>
  
  <pre><code>  &lt;md-input [(ngModel)]="price" placeholder="Price"&gt;
    &lt;/md-input&gt;{{price|customCurrency}}
  </code></pre>
  
  <p>which <a href="https://stackoverflow.com/questions/40849714/handling-dollars-in-angular-2-material-slider/">uses a custom version of the <code>CurrencyPipe</code></a> as shown in this Plnkr: </p>
  
  <p><a href="http://plnkr.co/edit/OM039CYEsS5CfhEuZdBN?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/OM039CYEsS5CfhEuZdBN?p=preview</a></p>
  
  <p>But instead of showing the raw input field value:</p>
  
  <pre><code>  Price
    100              $1.00
  </code></pre>
  
  <p>I'd like to also apply the <code>customCurrency</code> pipe directly to the input field display value so it looks like this:</p>
  
  <pre><code>  Price
    $1.00
  </code></pre>
  
  <p>when I type 100. It'd be best if the pipe is applied to the display value as you type, but if it can only be done <em>on-blur</em> that would be adequate. Any ideas how this might possible?</p>