Cannot read property 'data' of undefined in Material Table with selection

I am trying to use the Angular Material Table with selection, it says on the browser console 'data' is undefined here . The error on the console says "Cannot read property 'data' of undefined in Material Table with selection" however the table is displayed with the data from Json file.

Here is the full code for the .ts file

export class GetUserComponent implements OnInit

isFetching = false;
displayedColumns: string[] = ['select','title','content'];

dataSource : MatTableDataSource<User>;
selection = new SelectionModel<User>(true, []);

constructor(private http: HttpClient, private userService : UserService) { }

/** Whether the number of selected elements matches the total number of rows. */
isAllSelected() {
const numSelected = this.selection.selected.length;
**const numRows = this.dataSource.data.length;**
return numSelected === numRows;
}

/** Selects all rows if they are not all selected; otherwise clear selection. */
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}

/** The label for the checkbox on the passed row */
checkboxLabel(row?: User): string {
if (!row) {
return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
}
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.id + 1}`;
}


This is the HTML table

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
[aria-label]="checkboxLabel()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
[aria-label]="checkboxLabel(row)">
</mat-checkbox>
</td>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>
<td mat-cell *matCellDef="let element"> {{element.title}} </td>
</ng-container>
<ng-container matColumnDef="content">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Content </th>
<td mat-cell *matCellDef="let element"> {{element.content}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)">

</tr>
</table>


Please advise on this.

Continue reading...