Searching in multiple columns angular2

Question

I am using a textarea for searching a table, all in an angular2 application with bootstrap.

My code was searching in one column, now I want the search term to be looked up across two columns, and the user will see all the matched table rows highlighted.

HTML:

<input class="form-control" id="search" [(ngModel)]="searchString" type="text" placeholder="Search by Book ID.." style="float:right;"
  value="">

<tr *ngFor="let books of bookDetails |jobsearch:{ bookId: searchString} : false | paginate: { itemsPerPage: 50, currentPage: p };">

The other column that I want to be searched is 'bookName'.

What is the «jobsearch» pipe? You could just write a custom pipe that filters based on your logic — Kim Raaness, Feb 07 '18 at 08:04
this link may help you: https://stackoverflow.com/questions/41672578/filter-on-multiple-columns-using-one-pipe-angular-2 — Saeed, Feb 07 '18 at 08:56

score 0 · Accepted Answer · answered Feb 07 '18 at 09:16

Custom pipe example:

@Pipe({
    name: 'booksearch'
})
export class BookSearchPipe implements PipeTransform {
    transform(items: Array<any>, filter: {[key: string]: any }): Array<any> {
        return items.filter(item => {
            let noMatch = Object.keys(filter)
            .find(key => item[key] !== filter[key]);

            return !noMatch;
        });
    }
}

Usage:

<tr *ngFor="let books of bookDetails |booksearch:{ bookId: searchString, bookname: searchString }”>

Searching in multiple columns angular2

1 Answers1