How do I call an Angular 2 pipe with multiple arguments

Question

I know I can call a pipe like this      myData   date  fullDate       Here the date pipe takes only one argument  What is the syntax to call a pipe with more parameters  from component s template HTML and directly in code

User · Answer

You re missing the actual pipe      myData   date  fullDate       Multiple parameters can be separated by a colon          myData   myPipe  arg1   arg2   arg3       Also you can chain pipes  like so      myData   date  fullDate    myPipe  arg1   arg2   arg3

User · Answer

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

User · Answer

Since beta 16 the parameters are not passed as array to the transform   method anymore but instead as individual parameters      myData   date  fullDate   arg1   arg2       export class DatePipe implements PipeTransform         transform value any  arg1 any  arg2 any  any                   https   github com angular angular blob master CHANGELOG md 200-beta16-2016-04-26     pipes now take a variable number of arguments  and not an array that contains all arguments

User · Answer

I use Pipes in Angular 2  to filter arrays of objects  The following takes multiple filter arguments but you can send just one if that suits your needs  Here is a StackBlitz Example  It will find the keys you want to filter by and then filters by the value you supply  It s actually quite simple  if it sounds complicated it s not  check out the StackBlitz Example    Here is the Pipe being called in an  ngFor directive     lt div  ngFor  let item of items   filtermulti    title  mr    last  jacobs      gt    Hello   item first      lt  div gt    Here is the Pipe   import   Pipe  PipeTransform   from   angular core     Pipe     name   filtermulti     export class FiltermultiPipe implements PipeTransform     transform myobjects  Array lt object gt   args   Array lt object gt    any       if  args  amp  amp  Array isArray myobjects              copy all objects of original array into new array of objects       var returnobjects   myobjects           args are the compare oprators provided in the  ngFor directive       args forEach function  filterobj            let filterkey   Object keys filterobj  0           let filtervalue   filterobj filterkey           myobjects forEach function  objectToFilter              if  objectToFilter filterkey     filtervalue  amp  amp  filtervalue                         object didn t match a filter value so remove it from array via filter             returnobjects   returnobjects filter obj   gt  obj     objectToFilter                                             return new array of objects to  ngFor directive       return returnobjects                And here is the Component containing the object to filter   import   Component   from   angular core   import   FiltermultiPipe   from    pipes filtermulti pipe     Component     selector   app-root     templateUrl     app component html     styleUrls      app component css      export class AppComponent     title    app     items      title   mr   first   john   last   jones          title   mr   first   adrian   last   jacobs          title   mr   first   lou   last   jones          title   ms   first   linda   last   hamilton             StackBlitz Example  GitHub Example  Fork a working copy of this example here   Please note that in an answer provided by Gunter  Gunter states that arrays are no longer used as filter interfaces but I searched the link he provides and found nothing speaking to that claim  Also  the StackBlitz example provided shows this code working as intended in Angular 6 1 9  It will work in Angular 2    Happy Coding  -

User · Answer

Extended from   user3777549  Multi-value filter on one set of data reference to title key only   HTML   lt div  ngFor  let item of items   filtermulti    title   mr   ms     first   john       gt   Hello   item first      lt  div gt    filterMultiple  args forEach function  filterobj        console log filterobj      let filterkey   Object keys filterobj  0       let filtervalue   filterobj filterkey       myobjects forEach function  objectToFilter           if   filtervalue some x  gt x  objectToFilter filterkey    amp  amp  filtervalue                     object didn t match a filter value so remove it from array via filter         returnobjects   returnobjects filter obj   gt  obj     objectToFilter

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

Examples related to javascript

Examples related to angular

Examples related to angular2-pipe