CODEWITHSUNDEEP
javascriptangulartypescriptfilter
Kunal Vijan
Kunal Vijan

Reputation: 447

How can I update the individual count as well once filters are applied?

I wanted to update the individual count (applicable, not applicable) once the filters are applied. It's currently only updating the total count.

Please assist.

Live: https://angular-ivy-dubf37.stackblitz.io/

getCounts() {
    this.impactCount = { applicable: 0, notApplicable: 0, fyi: 0 };
    
    this.allUser.forEach(row => {
      // impact counts
      if (row.impact === "Applicable") {
        this.impactCount.applicable++;
      } else if (row.impact === "Not Applicable") {
        this.impactCount.notApplicable++;
      } else if (row.impact === "FYI") {
        this.impactCount.fyi++;
      }
    });
  }

Upvotes: 0

Views: 42

Answers (1)

errorau
errorau

Reputation: 2334

You problem is when you change filter pipe knows new data but you getcount function doesn't know data has changed

As a simple solution (may be a dirty solution.I am also open to suggestions: D) First of all, I changed your getCount method a bit.

getCounts (user ?: any) {
     this.impactCount = {applicable: 0, notApplicable: 0, fyi: 0};
     let data = user? user: this.allUser;
     data.forEach (row => {
       if (row.impact === "Applicable") (
         this.impactCount.applicable ++;
       } else if (row.impact === "Not Applicable") {
         this.impactCount.notApplicable ++;
       } else if (row.impact === "FYI") {
         this.impactCount.fyi ++;
       }
     });
   }

then send pipe return values with your getCount function as below

<ng-container *ngIf="allUser  | tableFilter: form.value as filteredUsers">
        <div class="text-right toal-records">
            Total: {{filteredUsers.length}}
            {{getCounts(filteredUsers)}}
        </div>

        <div style="padding-left: 20px">
            Applicable: {{impactCount.applicable}} Not Applicable:
            {{impactCount.notApplicable}} FYI: {{impactCount.fyi}}
        </div>

also i updated your demo project

Upvotes: 1

Related Questions