How do I call an Angular 2 pipe with multiple arguments?

by

In your component’s template you can use multiple arguments by separating them with colons:

{{ myData | myPipe: 'arg1':'arg2':'arg3'... }}

From your code it will look like this:

new MyPipe().transform(myData, arg1, arg2, arg3)

And in your transform function inside your pipe you can use the arguments like this:

export class MyPipe implements PipeTransform { 
    // specify every argument individually   
    transform(value: any, arg1: any, arg2: any, arg3: any): any { }
    // or use a rest parameter
    transform(value: any, ...args: any[]): any { }
}

Beta 16 and before (2016-04-26)

Pipes take an array that contains all arguments, so you need to call them like this:

new MyPipe().transform(myData, [arg1, arg2, arg3...])

And your transform function will look like this:

export class MyPipe implements PipeTransform {    
    transform(value:any, args:any[]):any {
        var arg1 = args[0];
        var arg2 = args[1];
        ...
    }
}

More Related Contents:

  1. What is the meaning of the “at” (@) prefix on npm packages?
  2. How to get current value of RxJS Subject or Observable?
  3. Migrating AngularJS to Angular 4,5 (with DEMO) [closed]
  4. How to set locale in DatePipe in Angular 2?
  5. Dynamic template URLs in Angular 2
  6. Angular Cli Webpack, How to add or bundle external js files?
  7. App.settings – the Angular way?
  8. Angular2 Dynamic input field lose focus when input changes
  9. How to Consume Http Component efficiently in a service in angular 2 beta?
  10. Angular 2.1.0 create child component on the fly, dynamically
  11. Angular4 – No value accessor for form control
  12. Crbug/1173575, non-JS module files deprecated. chromewebdata/(index)꞉5305:9:5551
  13. What is ngDefaultControl in Angular?
  14. Property ‘value’ does not exist on type EventTarget in TypeScript [duplicate]
  15. Load new modules dynamically in run-time with Angular CLI & Angular 5
  16. Angular 2 – communication of typescript functions with external js libraries
  17. How to expose angular 2 methods publicly?
  18. Use external javaScript library in angular application
  19. How to set Angular 4 background image?
  20. Rxjs toPromise() deprecated
  21. How to check for isBrowser in Angular 4
  22. CORS and Google Maps Places Autocomplete API calls [duplicate]
  23. Change route params without reloading in Angular 2
  24. What is the difference between Observable and a Subject in rxjs?
  25. What is the difference between BehaviorSubject and Observable?
  26. ChangeDetectionStrategy.OnPush and Observable.subscribe in Angular 2
  27. Angular 2 binding/events not working when adding template as innerHTML
  28. Storing Objects in localStorage
  29. Subscribe to observable is returning undefined
  30. How can I apply a quantity limit to *ngFor? [duplicate]

Leave a Comment