Angular 2 Input Custom Pipe

Question

Is there any way to use currency or a custom pipe inside an input text in Angular 2?

I\'ve tried this:

Answer 1

I've been able to use the angular2-text-mask and text-mask-addons as a way to transform the format of input text field values. The documentation and related info is quite thorough and a currency example can be seen on a text-mask demo page.

Though I've not tried it, this ngconsultant blog post discusses a technique for adjusting input values using a somewhat limiting (browser-native focus/blur methods) @HostListener technique.

With either approach you have to be wary of whether you're transforming the input simply to make the UI more friendly for the user OR if you want to utilize/preserve only properly formatted input bound to your data model in the component.

Regarding the former, if you want to remove the formatting that is applied to the input before it is utilized, stored, or passed on, extra work/code/intervention is required either in your component code or in other services that manage the data model to parse the formatting out of the data bound from the input value.

(A very basic solution is discussed in this stackoverflow post.)

Answer 2

It's not possible to use pipes in inputs, even in angular 1.

What you are looking for is a mask directive. For angular1 there are a lot of directives like ngMask, angular-input-masks and others.

Angular2 is in release candidate right now (06/02/2016), so there are just a few "directives".

You can also build your own mask component.