javascript - What should I use to get my updated count based on filter selection?

Question

I am using CSV upload and display the data in the table along with using custom table filter pipe function.

How can I get the count of filtered based on filter section?

For e.g. Once you upload data considering your csv has 7 rows; it would be Showing 7 of 7 Records.

When you are filtering based on Gender male/female I should get Showing 4 of 7 Records or Showing 3 of 7 Records

I tried below I didn't get the results.

Showing {{filteredUsers.length}} of {{dataList.length}} Records

If I am doing like:

<strong class="ml-3" *ngFor="let record of dataList | tableFilter: form.value as filteredUsers">
Showing {{filteredUsers.length}} of {{dataList.length}} Records
</strong>

I am getting the count n updating as well based on the filter selection but it's repeating based on the number of rows so, coming 7 times.

app.component.html

<form #form="ngForm">
<select class="form-control form-control-sm" name="gender" ngModel>
<option value="" selected>All</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</form>

<tr *ngFor="let record of dataList | tableFilter: form.value as filteredUsers">
<td> {{record.name}} </td>
<td> {{record.gender}} </td>
</tr>

Live: https://stackblitz.com/edit/angular-csv-parser-aazvnq?file=app%2Fapp.component.html

CSV Sample

question from:https://stackoverflow.com/questions/65859488/what-should-i-use-to-get-my-updated-count-based-on-filter-selection

Answer 1

I suggest a slightly different approach than Nicholas's solution - instead of updating two items every time a change is made, you can have the pipe function update the variable which represents the count - this way, a single place is responsible of handling both the count and the filtering, this requires adding an object in the component:

countObj = { count: 0 };

in the template:

Showing {{countObj.count}} Records
...
<tr *ngFor="let record of dataList | tableFilter: form.value:countObj">

and in the transform function:

  transform(list: any[], filters: Object, countObj: any) {
    const keys = Object.keys(filters).filter(key => filters[key]);
    const filterUser = user => keys.every(key => user[key] === filters[key]);

    if (keys.length) {
      const res = list.filter(filterUser);
      countObj.count = res.length;
      return res;
    } else {
      countObj.count = list.length;
      return list;
    }
  }

working stackblitz