CODEWITHSUNDEEP
angularangular-material-table
Vishnu .T.D
Vishnu .T.D

Reputation: 83

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

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 class="example-container mat-elevation-z8" >
        <table id="day" mat-table [dataSource]="dataSource" matSort>
            <!--Sl.No.-->
            <ng-container matColumnDef="slno">
                <th class="mn50 text-center" mat-header-cell *matHeaderCellDef>Sl.No.</th>
                <td class="mn50 text-center" mat-cell *matCellDef="let element; let i = index;"> {{(paginator.pageIndex * paginator.pageSize) + (i + 1)}} </td>
            </ng-container>
            <!-- Subject -->
            <ng-container matColumnDef="subject">
                <th class="" mat-header-cell *matHeaderCellDef  mat-sort-header> Subject </th>
                <td class="" mat-cell *matCellDef="let element"><span class="underline" (click)="SelectedData(element);DetailedView()">{{element.subject}}</span></td>
            </ng-container>
            <!-- Recipients -->
            <ng-container matColumnDef="recipients">
                <th class="" mat-header-cell *matHeaderCellDef  mat-sort-header> Recipients </th>
                <td class="" mat-cell *matCellDef="let element">{{element.recipients}}</td>
            </ng-container>
            <!-- Date -->
            <ng-container matColumnDef="date">
                <th class="" mat-header-cell *matHeaderCellDef  mat-sort-header> Date </th>
                <td class="" 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>

Upvotes: 0

Views: 1820

Answers (1)

Chellappan வ
Chellappan வ

Reputation: 27303

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

Upvotes: 3

Related Questions