Apply pipe to input box

Question

I have written thousandsSeparatorPipe and it is working fine with the label as shown below.

  <ion-label fixed>{{project.contingency | thousandsSeparatorPipe}}</ion-label>

But how can I apply that pipe to the ion-input? Because I need to show the thousands separator when user types on the below numeric box.Any help, please?

<ion-input type="number" formControlName="budget" [(ngModel)]="project.budget" ></ion-input>

Answer 1

No, It's not possible to use pipes over inputs like above, even in AngularJS which is not a recommended way too.

Inorder to use you need to apply the two-way data binding with two instructions. [ngModel]="project.budget| thousandsSeparatorPipe" (ngModelChange)="project.budget= $event"

DEMO

Alternatively you could use some of the mask libraries for input out there and create a directive.