AnGULAR 5- how to search a row by entering in search box

Question

AnGULAR 5- how to search a row by entering row word in search box

Jayakumar Balasubramaniam · Answer

Definitely, because if you use *ngFor and build custom datatable or if use any plugins it is sure that you will pass array as input parameter something like below, ex: [values] ="objArray" instead you can pass like this, ex: [values]="filterArray(objArray)" So, my below explanation meets, it will work.

Jayakumar Balasubramaniam · Answer

Hi, It can easily done by using angular filters, Follow the below steps, Step 1: Make sure you have below members in your component like below, export class AppComponent implements OnInit { private filterKeyword: string = "" ; private objArray: any[] = []; constructor() { } public ngOnInit() { this .objArray.push({ FirstName: "Arut" , LastName: "Selvan" }); this .objArray.push({ FirstName: "Vimal" , LastName: "Raj" }); } private filterArray(arrayList: any[]): any[] { let filtered: any[] = arrayList; if (arrayList != null && this .filterKeyword != null ) { filtered = arrayList.filter(o => this .checkAgainstProperty(o.FirstName, this .filterKeyword) || this .checkAgainstProperty(o.LastName, this .filterKeyword)); } return filtered;; } public checkAgainstProperty(property: any, searchKeyword: string): boolean { let value: boolean = false ; if (property != null && property != "" ) { if (property.toLowerCase().indexOf(searchKeyword.toLowerCase()) >= 0) { value = true ; } } return value; } } Step 2: Make sure you have something like below in your component HTML, input type = "text" [(ngModel)]="filterKeyword" class = "form-control" placeholder = "Filter by keyword" autocomplete = "off" > div * ngFor = "let element of (filterArray(objArray)" > p > {{element.FirstName}} p > p > {{element.LastName}} p > p > p > div > Plese find the explanation for the same here, Whenever value changed in the search text box it will be binded in filterKeyword, and since we are using the filterArray method in ngFor every time whenever the value changes it will be called. In that method we are filtering the array passed at runtime and retruning the filtered one which will be used for looping in ngFor. So the source array will remain untouched, when you remove values from Inout text box you will get the original values back. *Please accept if this answer helps you.

nithi mano · Answer

Thanks a lot jayakumar. Will this code be helpful for datagrid/data table search ?

AnGULAR 5- how to search a row by entering in search box

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (3)