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

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.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jayakumar Balasubramaniam8y ago
Accepted 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.
+1
nithi mano8y ago
Thanks a lot jayakumar.

Will this code be helpful for datagrid/data table search ?
0
Jayakumar Balasubramaniam8y ago
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.
+1