Angular 8 - How to use pipes in an input with 2-way data-binding?
NickName:RocketMatt Ask DateTime:2019-07-02T18:33:26

Angular 8 - How to use pipes in an input with 2-way data-binding?

I'm a relative newbie when it comes to Angular and I'm building an Angular app and am looking to format an input field where a user inputs their income and it needs to be formatted so that it both has a GBP symbol before it and with commas separating out the value into thousands.

So, for example, a user adds their income as 34000 and it will be displayed as £34,000

I'm trying to use pipes to help me achieve this and I've tried using the CurrencyPipe and regular Pipes and I get the same issues with both. So, for example, with the number pipe I'll have:

<input type="number" (change)="getApp1income()" (keyup)="getApp1income()" [(ngModel)]="app1income | number" [ngModelOptions]="{standalone: true}" min="0" step="500" data-number-to-fixed="2" data-number-stepfactor="500" />

However, this gives me the following error:

Uncaught Error: Template parse errors:
Parser Error: Cannot have a pipe in an action expression at column 14 in [app1income | number=$event]

I'll get the same error when using CurrencyPipe as well. I think this has to do with the fact with the fact that ngModel is using 2-way data-binding as I'm using the value entered elsewhere. But I can't seem to find a solution at all and I've looked at various similar issues both on here and elsewhere.

Any help would be appreciated.

Copyright Notice:Content Author:「RocketMatt」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/56850520/angular-8-how-to-use-pipes-in-an-input-with-2-way-data-binding

Answers
SiddAjmera 2019-07-02T10:47:28

If you're willing to use a third-party library for this, you can use ng2-currency-mask\n\n\nnpm install ng2-currency-mask --save\nAdd CurrencyMaskModule to the imports Array of the Module that you want to use this in.\nUse it like this: <input currencyMask [(ngModel)]=\"value\" [options]=\"{ prefix: '£ ', thousands: ',', precision: 0 }\"/>\n\n\n\n\n\n Here's a Working Sample StackBlitz for your ref.\n",


More about “Angular 8 - How to use pipes in an input with 2-way data-binding?” related questions

Angular 8 - How to use pipes in an input with 2-way data-binding?

I'm a relative newbie when it comes to Angular and I'm building an Angular app and am looking to format an input field where a user inputs their income and it needs to be formatted so that it both ...

Show Detail

Is Angular4 really 2-Way data-Binding?

What I have learned of Angular2/4/5/6 is that due to [(ngModel)] the 2-way data binding is possible in it -- Just like it happend in Angular1 via $scope. Now, I came across this website which cle...

Show Detail

How to pass ngModel to AngularJS component without 2-way binding?

I have custom input as AngularJS 1.5 component with one-way data bindings and ngModel as two-way data binding: return { bindings: { form: "&lt;", fieldName: "@", minLengt...

Show Detail

How to use pipes in Angular 5 reactive form input

I am trying to figure out how to use a pipe within a reactive form so that the input is forced into a currency format. I have already created my own pipe for this which I have tested in other area...

Show Detail

Angular data-binding after setting input value with karma

My question is extremely close to that one : Update Angular model after setting input value with jQuery But, here, my input is modified by the val() method of Karma runner : element('#stuff_in...

Show Detail

Two-Way Data-Binding with Angular2

Does anybody know what I'm doing wrong here? I'm unable to get Angular2 2-way data-binding to work using the [(ngModel)] syntax. Here's my Component: import { Component } from '@angular/core'; imp...

Show Detail

Angular 2-way binding with multiple nested component

I'm new to angular and I want to content editing with angular 2-way binding to nested component. Here is the structure without 2-way binding. parentModule.ts this.contactList : Array[contact] =[...

Show Detail

How to add pipes conditionally and dynamically in Angular?

I have multiple pipes and want to add one or more pipes based on a condition to my input element. It must be check whether the input element (this) has a certain style (this.styles) and based on that

Show Detail

Angular - Use pipes in services and components

In AngularJS, I am able to use filters (pipes) inside of services and controllers using syntax similar to this: $filter('date')(myDate, 'yyyy-MM-dd'); Is it possible to use pipes in services/comp...

Show Detail

Angular - Use pipes in services and components

In AngularJS, I am able to use filters (pipes) inside of services and controllers using syntax similar to this: $filter('date')(myDate, 'yyyy-MM-dd'); Is it possible to use pipes in services/comp...

Show Detail