ERROR TypeError: Cannot read properties of undefined (reading 'pageIndex')-CodePudding

I'm trying to give a *ngIf condition to mat-table. But while giving the condition I'm getting ERROR TypeError: Cannot read properties of undefined (reading 'pageIndex'). How to fix this.

Here is my HTML

<div *ngIf="!detail">
    <div  >
        <table id="day" mat-table [dataSource]="dataSource" matSort>
            <!--Sl.No.-->
            <ng-container matColumnDef="slno">
                <th  mat-header-cell *matHeaderCellDef>Sl.No.</th>
                <td  mat-cell *matCellDef="let element; let i = index;"> {{(paginator.pageIndex * paginator.pageSize)   (i   1)}} </td>
            </ng-container>
            <!-- Subject -->
            <ng-container matColumnDef="subject">
                <th  mat-header-cell *matHeaderCellDef  mat-sort-header> Subject </th>
                <td  mat-cell *matCellDef="let element"><span  (click)="SelectedData(element);DetailedView()">{{element.subject}}</span></td>
            </ng-container>
            <!-- Recipients -->
            <ng-container matColumnDef="recipients">
                <th  mat-header-cell *matHeaderCellDef  mat-sort-header> Recipients </th>
                <td  mat-cell *matCellDef="let element">{{element.recipients}}</td>
            </ng-container>
            <!-- Date -->
            <ng-container matColumnDef="date">
                <th  mat-header-cell *matHeaderCellDef  mat-sort-header> Date </th>
                <td  mat-cell *matCellDef="let element">{{element.date | date: 'dd/MM/yyyy'}}, {{element.time}}</td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
    </div>
    <!-- pagination -->
    <mat-paginator [pageSizeOptions]="[50, 10, 100]" showFirstLastButtons></mat-paginator>
</div>

CodePudding user response：

Use setter to access paginator and connect dataSource with paginator below like this:

 paginator: MatPaginator;
 @ViewChild(MatPaginator) set _paginator(paginator: MatPaginator) {
    this.paginator = paginator;
    this.dataSource.paginator = this.paginator;
  }

Working Sample