Search code examples
angulartypescriptionic3angular2-pipe

Apply pipe to input box

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>
Solution

  • 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.