Updating the actual values upon filtering using PrimeNG

Question

I am using PrimeNG with Global filter added to my table:

 <input #gb type="text" pInputText size="50" placeholder="Filter">

Datatable:

<p-dataTable *ngIf="users != null && users.length > 0" [value]="users" loadingIcon="fa-spinner" [globalFilter]="gb">

I need to send mails to the users that have been filtered. I noticed however that the users count (amount of users) does not update upon filter.

The records are displayed correctly based on the filter in the table but mailing these users would send the mail to all users retrieved from the DB.

Is there a way of updating the actual users' amount upon filter using PrimeNG filter option?

Answer 1

DataTable component has a variable called filteredValue and filtered values are stored in that variable. There are two ways to get filtered values:

First way

You can use ViewChild to get a reference to DataTable object and get the users you filtered:

Template

<p-dataTable #dataTable *ngIf="users != null && users.length > 0" [value]="users" loadingIcon="fa-spinner" [globalFilter]="gb">

Component

import { Component, ViewChild } from '@angular/core';
import { DataTable } from 'primeng/primeng';

@ViewChild('dataTable')
dataTable: DataTable;

Now that you have reference to DataTable component, it is easy to get filtered users:

printFilteredUsers() {
  console.log(this.dataTable.filteredValue);
}

Second way

DataTable component has event called onFilter which is triggered each time DataTable's content is filtered:

Template

<p-dataTable *ngIf="users != null && users.length > 0"
  [value]="users" loadingIcon="fa-spinner" [globalFilter]="gb"
  (onFilter)="printFilteredUsers($event)">

Component

printFilteredUsers(event: any) {
  console.log(event.filteredValue); // filtered users
  console.log(event.filters); // applied filters
}

PrimeNG's DataTable is well documented, I suggest checking it out. You can do it here.