CODEWITHSUNDEEP
angularangular2-formsangular2-pipe
Csaba
Csaba

Reputation: 2096

Angular 2.0.0 final - Custom Pipe filtering with multiple from field conditions

I am trying to filter foods with multiple from field conditions (input & drop-down). I can filter them separately, but I can't figure out how to make them work together.

I've created two separate Custom Pipes (one for the input filter and one for the drop-down filter) to make thing more modular.

Here is the logic behind the Input Pipe:

// Input Filter
transform(value: IProduct[], filter: string): IProduct[] {
    filter = filter ? filter.toLocaleLowerCase() : null;
    return filter ? value.filter((product: IProduct) =>
        product.prodName.toLocaleLowerCase().indexOf(filter) !== -1) : value;
}

the logic behind the Dropdown Pipe:

// Dropdown Filter
transform(value: IProduct[], filter: string): IProduct[] {
    return filter ? value.filter((product: IProduct) =>
        product.prodCategory.indexOf(filter) !== -1) : value;
}

This is the custom pipe in the template view:

<tr *ngFor='let _product of _products | DropdownProductFilter: ddlistFilter.name ||  InputProductFilter: listFilter'

Here is a the example http://plnkr.co/qwsk86hHLbI26w3HVMdV

Upvotes: 0

Views: 1145

Answers (1)

Harry Ninh
Harry Ninh

Reputation: 16738

I think you have a typo in your template, change your || to | will do the trick:

<tr *ngFor='let _product of _products | DropdownProductFilter: ddlistFilter.name |  InputProductFilter: listFilter'>

Upvotes: 1

Related Questions