How to get the updated count on filter selection?

Question

How can I get the updated total count on filter? As of now I have 6 records when I am filtering for e.g. Gender: Male it shows 1 record but my total still says as "6" and Applicable: 2 Not Applicable: 4 FYI: 0. I wanted to update the same and get the updated results.

table-filter.pipe.ts

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

@Pipe({
  name: "tableFilter"
})

export class TableFilterPipe implements PipeTransform {
  transform(list: any[], filters: any) {
    const keys = Object.keys(filters).filter(key => filters[key]);
    const filterUser = (user: { [x: string]: any; }) =>
      keys.every(key => {
        if (key == "sdob") {
          return new Date(user["dob"]) >= new Date(filters[key]);
        } else if (key == "edob") {
          return new Date(filters[key]) >= new Date(user["dob"]);
        } else {
          return user[key] === filters[key];
        }
      });
    return keys.length ? list.filter(filterUser) : list;
  }
}

getLatestUser() {
    this.commonService.getAllUser().subscribe(response => {
      this.allUser = response;
      this.totalRecords = this.allUser.length;

      this.getCounts();

      this.allUser.forEach(row => (row.checked = false));
    });
  }

Live View: https://angular-ivy-ww5hgk.stackblitz.io/

Entire Code: https://stackblitz.com/edit/angular-ivy-ww5hgk?file=src%2Fapp%2Fapp.component.ts

Any help would be appreciated.

score 1 · Accepted Answer · answered Dec 24 '20 at 02:45

1

A bit hacky, but you can do this by moving the pipe to a container, and store the value in a local template variable, then you can use the value in the entire container and bind to the length of it. here is a live example.

answered Dec 24 '20 at 02:45

meblum

1,654
12
23

thanks @emmbee and same variable I can use to get the updated Applicable n Not Applicable count? – Kunal Vijan Dec 24 '20 at 04:22
@KunalVijan yes, but you will need to modify your code. Create a function that accepts an array and returns the Applicable/Not Applicable count, and pass the filtered array to the function. Honestly, I think our use case is too complex for a pipe. A pipe is very useful for simple conversions but for complex things, put the logic in the component javascript file. – meblum Dec 24 '20 at 04:30
can you also help me with this? this is kind of stuck on my head if you can help me with the solution. https://stackoverflow.com/questions/65423577/how-to-get-the-values-of-checkbox-instead-of-true – Kunal Vijan Dec 24 '20 at 04:36
I'll check it out tomorrow – meblum Dec 24 '20 at 04:59

How to get the updated count on filter selection?

1 Answers1