CODEWITHSUNDEEP
angulartypescriptsearch
Ashutosh Yadav
Ashutosh Yadav

Reputation: 33

How to implent a simple search function in angular on a Table and to show the matching rows only

I have search option on Table, I want to show the searched content on the page that the user wants. How can I attain that by writing a corresponding function in code of typescript.

Upvotes: 0

Views: 4005

Answers (1)

Ludwig
Ludwig

Reputation: 1272

Use *ngFor to create the rows in your table and use a pipe

<tr *ngFor="let item of items | filterPipe: searchToken">

Add a search field

<input placeholder="Type to filter" [(ngModel)]="searchToken"/>

In the component add the variable searchToken

searchToken: string;

Add a custom pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterPipe'
})
export class FilterPipe implements PipeTransform {

  transform(items: any[], searchToken: string) {


        if (searchToken == null)
            searchToken = "";


        searchToken = searchToken.toLowerCase();

        return items.filter(elem => elem.name.toLowerCase().indexOf(searchToken) > -1);
    }

}

Finally don't forget to put the pipe into the declarations in ngModule:

declarations: [ App, FilterPipe ]

Upvotes: 1

Related Questions