How to use custom pipes Angular2

Question

I have the following JSON object: http://pastebin.com/1TguvZXc

Here is my Models Component HTML:

<button *ngFor="let category of categories"    (click)="chooseCategory(this.category)" type="button" name="button" class="btn btn-default" id="{{category}}">
  {{category}}
</button>  
<div *ngFor="let model of models?.models">
  <div *ngFor="let year of model['years']">
    <div *ngFor="let style of year['styles'] | chooseCategory">
        {{model.name}}, {{style.submodel.body }}
   </div>
 </div>

A (pipe?) method from my models.component:

chooseCategory(selectedCategory: string): void {
    if((selectedCategory === '')) {
      this.filterByPipe.transform(this.models,
                     ['models.years.styles.submodel.body'], selectedCategory);
    }
 }

Additionally, I would like to use the FilterByPipe pipe from ngx-pipes to filter out by category in models.years.styles.submodel.body.

The code from my HTML roduces the following error:

Unhandled Promise rejection: Template parse errors:
The pipe 'chooseCategory' could not be found ("or="let model of models?.models">
  <div *ngFor="let year of model['years']">
    <div *ngFor="let s[ERROR ->]tyle of year['styles'] | chooseCategory">
        {{model.name}}, {{style.submodel.body }}

I've described clearly how to make custom pipes here: http://stackoverflow.com/a/42094880/6695924 — kind user, Feb 09 '17 at 19:41
@Kinduser, to expand on your post (which I saw and upvoted) - I would appreciate an understanding on how to implement this pipe through a (click) function from buttons — Moshe, Feb 09 '17 at 19:44
You want the pipe to execute on button click? Or I didn't understand you correctly? — kind user, Feb 09 '17 at 19:45
@Kinduser, I want the button click to pass an argument (category) to my pipe, and execute it. Correct. — Moshe, Feb 09 '17 at 19:48

developer033 · Answer 1 · 2017-02-09T19:38:30.783

1

Since you're importing the pipe and calling it from a button in your component, you don't need to call the pipe directly in your component. Also, chooseCategory is just a method, not a pipe. Then, remove the pipe from the following line:

<div *ngFor="let style of year['styles'] | chooseCategory">

edited Feb 09 '17 at 19:38

answered Feb 09 '17 at 19:35

developer033

24,267
8
82
108

how do I make this into a pipe? I need it to filter by categories w/ buttons – Moshe Feb 09 '17 at 19:37
I can't understand what do you want finally ^^. Some minutes ago you asked [**this**](http://stackoverflow.com/q/42140805/4911842) question for call `pipe` from a button, now you want the inverse.. – developer033 Feb 09 '17 at 19:39
I have a JSON response that is displaying all objects in NgFor="". using buttons, I plan on filtering this models data in the ngFor="" to display all the models that match the 'submodel.body' (category) – Moshe Feb 09 '17 at 19:42
Please, explain how this question is different from that another that you posted some time ago.. – developer033 Feb 09 '17 at 19:46
The previous question tried to accomplish accessing the data and filtering for uniqueness (still didn't get the uniqueness quite right). Now I want to expand on that where I can filter the data through categories – Moshe Feb 09 '17 at 19:47

Jaroslaw K. · Accepted Answer · 2017-02-09T20:16:31.440

I think that you not even read the documentation. Yu should create pipe in this way:

@Pipe({
    name: 'somePipe'
})
export class SomePipe {

   transform(value: any[]): any[] {
      //some transform code...
   }
}

and then can you call that in HTML file in this way:

<div *ngFor="let elem of elements | somePipe"></div>

Dont forget to declare your pipe in module.

@NgModule({
   declarations: [ SomePipe ]
})

That's what you use is a method, not a pipe.

If you want to executing pipe depend on (f.e.) button click you should build Pipe with argument:

   @Pipe({
      name: 'somePipe'
   })
   export class SomePipe {
      transform(value: any[], args: any[]): any[] {
         let someFlag: boolean = false;
         if(args && args[0]) someflag = true;
         if(someflag) {
            //some transform code...
         }
      }
   }

to call this pipe in this way

<div *ngFor="let elem of elements | somePipe : yesOrNo"></div>

and then can you use in your component method to click button

yesOrNo: boolean = false;

onClickButton(event: any) {
   event.preventDefault();
   yesOrNo = !yesOrNo;
}

Im not sure you understand the concept of pipe. You can use " | " pipe symbol in your HTML code in way presented by me. Or you can call _transform_ method in your TypeScript file. But you can't using pipe symbol on whichever method — Jaroslaw K., Feb 09 '17 at 19:57

How to use custom pipes Angular2

2 Answers2