Using Pipes within ngModel on INPUT Elements in Angular

by

You can’t use Template expression operators(pipe, save navigator) within template statement:

(ngModelChange)="Template statements"

(ngModelChange)=”item.value | useMyPipeToFormatThatValue=$event”

https://angular.io/guide/template-syntax#template-statements

Like template expressions, template statements use a language that
looks like JavaScript. The template statement parser differs from the
template expression parser and specifically supports both basic
assignment (=) and chaining expressions (with ; or ,).

However, certain JavaScript syntax is not allowed:

  • new
  • increment and decrement operators, ++ and —
  • operator assignment, such as += and -=
  • the bitwise operators | and &
  • the template expression operators

So you should write it as follows:

<input [ngModel]="item.value | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />

Plunker Example

More Related Contents:

  1. What are the parameters for the number Pipe – Angular 2
  2. How to declare a pipe globally to use in different modules?
  3. angular2: Error: TypeError: Cannot read property ‘…’ of undefined
  4. How to implement Modal Dialog in Angular 2 and above
  5. Angular-CLI proxy to backend doesn’t work
  6. How to load component dynamically using component name in angular2?
  7. What’s the difference between –base-href and –deploy-url parameters of angular-cli tool
  8. How to iterate object keys using *ngFor?
  9. What are the practical differences between template-driven and reactive forms?
  10. Get Value From Select Option in Angular 4
  11. How to undo Angular 2 Cli ng-eject?
  12. Angular2 How to navigate to certain section of the page identified with an id attribute
  13. CORS issue with Google Oauth2 for server side webapps
  14. How to smooth scroll to page anchor in angular 4 without plugins properly?
  15. How to make CORS-enabled HTTP requests in Angular 2?
  16. Angular – res.json() is not a function
  17. inject() must be called from an injection context
  18. Angular firebase email verification false after verify
  19. Property ‘of’ does not exist on type ‘typeof Observable [duplicate]
  20. How to enable production mode?
  21. Angular2 router (@angular/router), how to set default route?
  22. How to correctly import operators from the `rxjs` package
  23. Ng serve throwing @angular/core/core has no exported member ‘eeFactoryDef’
  24. How to import a new font into a project – Angular 5
  25. Angular2 Styles in a Directive
  26. How to submit form to server in Angular2?
  27. How to receive blob responses using Angular’s 2+ @angular/http module?
  28. How to pass results between chained observables
  29. Angular2 router, get route data from url, to display breadcrumbs
  30. Share data between components using a service in Angular2

Leave a Comment