How to use custom pipes Angular2 - json

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 }}

Answer 1

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;
}

Answer 2

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">