How to get only filtered data in datasource of isAllselected function ie. checkbox list function "isAllSelected" in angular 7

I have mat table with all/row select checkbox and filter function, I’m applying a filter on a datasource and I want to retrieve all the filtered data from this data source.

The filter is correctly applied, in my mat table filtered data is displaying only the filtered item, at the time, I’m selecting row wise item that is work but when I want to “select all” checkbox in mat-header, filtered item rows are selected on front side but at the time I’m checking through debugger, in selected row array all rows are selected but required filtered data rows are not in data source. How to solve this issue? If anyone now put the example URL on comment.

Here is some code :

<mat-form-field appearance="outline">
    <mat-label>Search</mat-label>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
    <mat-icon matSuffix style="font-size: 16px;">search</mat-icon>
</mat-form-field>

<table mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox (change)="$event ? masterToggle() : null"   [checked]="selection.hasValue() && isAllSelected()"
                 [indeterminate]="selection.hasValue() && !isAllSelected()">
            </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
            <mat-checkbox (click)="$event.stopPropagation()"
                     (change)="$event ? selection.toggle(row) : null"
                     [checked]="selection.isSelected(row)">
            </mat-checkbox>
        </td>
   </ng-container>

   <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef ><b>S.No.</b></th>
       <td mat-cell *matCellDef="let element; let i=index">{{i+1}}</td>
   </ng-container>

   <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef  mat-sort-header="name">
           <b>Office Name</b>
       </th>
       <td mat-cell *matCellDef="let element"> {{element.name }} </td>
   </ng-container>

   <ng-container matColumnDef="contactPerson">
       <th mat-header-cell *matHeaderCellDef mat-sort-header="contactPerson"><b>Contact Person</b></th>
       <td mat-cell *matCellDef="let element"> {{element.contactPerson}} </td>
   </ng-container>

   <ng-container matColumnDef="phone">
       <th mat-header-cell *matHeaderCellDef mat-sort-header="phone"><b>Mobile No</b></th>
       <td mat-cell *matCellDef="let element"> {{element.phone}} </td>
   </ng-container>

TS code:

applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
}

isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
}

masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
}

Source: New feed
Source Url How to get only filtered data in datasource of isAllselected function ie. checkbox list function "isAllSelected" in angular 7