angulartypescriptangular2-material

Apply pipe to display value of md-input

I have a form in my Angular 2 Material application with a price:

  <md-input [(ngModel)]="price" placeholder="Price">
  </md-input>{{price|customCurrency}}

which uses a custom version of the CurrencyPipe as shown in this Plnkr:

http://plnkr.co/edit/OM039CYEsS5CfhEuZdBN?p=preview

But instead of showing the raw input field value:

  Price
  100              $1.00

I'd like to also apply the customCurrency pipe directly to the input field display value so it looks like this:

  Price
  $1.00

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 on-blur that would be adequate. Any ideas how this might possible?

Solution

  • This is not (yet) possible in Angular 2; see Angular 2 issue 13140. As a work-around, you can do:

      <md-input [(ngModel)]="Price" placeholder="Price: {{price|customCurrency">
  </md-input>

    which looks a little bit nicer but not much:

      Price: $1.00
  100