Angular 7 : Dynamic filters in *ngFor

Question

I am displaying list like below

<tr role="row" *ngFor="let record of recordList | filterColumn: {AccessCode: filters.accessCode} | filterColumn: {Organization: filters.organization} | filterColumn: {LastName: filters.lastName}"></tr>

Now what i want to do is generate | filterColumn: {AccessCode: filters.accessCode} | filterColumn: {Organization: filters.organization} from code/component & add it to for loop.

These filters are conditional & i am creating generic grid. So i want to do these filters dynamically

How can i achieve this

you might want to check https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor and https://angular.io/guide/pipes#no-filter-pipe — ABOS, Dec 20 '18 at 14:38

score 1 · Answer 1 · answered Dec 20 '18 at 14:46

1

Here are two ways of doing it:

1) Modify the array your looping through in your component with your filters. If you press a button to activate a filter, do the filtering on the array in the component when the button is pressed.

2) Do your loop in a ng-container element, and have ngIf nested underneath:

 <ng-container *ngFor="let record of recordList">
    <tr role="row" *ngIf="record.AccessCode === filters.accessCode"></tr>
 </ng-container>

answered Dec 20 '18 at 14:46

Bjarne Gerhardt-Pedersen

1,097
12
20

2nd point is not possible for me. I have to use filter pipe to filter array. Column list is dynamic. So i won't know which column is displayed & how many. – Ankur Akvaliya Dec 20 '18 at 15:08

score 0 · Answer 2 · answered Nov 02 '20 at 04:32

Use wgnx-filter pipe to make your dynamic filter conditions.

In the filter method, you can be configure fields to apply the filter and sent to pipe component.

In html, use:

<tr *ngFor="let invoice of filterFunction(invoices), index as i">

In typescript function, see the sample:

filterFunction(collection: any[]): any[] {
    return this.pipefilter.transform(collection, [
      { field: "general.number_invoice", value: this.filterInvoice }, // nested property
      { field: "note_invoice", value: this.filterInvoice },
      { field: "customer_invoice", value: this.filterInvoice },
      { field: "payment_invoice", value: this.filterInvoice }
    ]);
}

You can assemble the parameter array with the fields that will be used in the filter dynamically.

For a complete example, see stackblitz

For get component documentation, got to npm package wngx-filter

Angular 7 : Dynamic filters in *ngFor

2 Answers2