I've a problem with the angular paginator, it doesn't work

I have a problem with angular's paginator.

It is instantiated in my class:

@ViewChild("paginator") paginator: MatPaginator;


After getting the data from my API called by ngOnInit(), I set the pager to the data:

this._service.get().subscribe({
next: (response) => {
this._dataSource.data = response.Content || [];
if (this.paginator) {
this.paginator.pageSize = this.pageSize;
this.paginator._changePageSize(this.pageSize);
this._dataSource.paginator = this.paginator;
}
},
error: (error) => {
this._dialogService.openError(error);
}
});


then I try to force paginator again but it doesn't work:

ngAfterViewInit() {
if (this.paginator) {
this.paginator.pageSize = this.pageSize;
this.paginator._changePageSize(this.pageSize);
}
this._dataSource.paginator = this.paginator;
}


in my HTML I have the table:

<table mat-table [dataSource]="_dataSource" multiTemplateDataRows>
<ng-container matColumnDef="...">
<th mat-header-cell *matHeaderCellDef> ... </th>
<td mat-cell *matCellDef="let element"> {{element....}} </td>
</ng-container>
<ng-container matColumnDef="...">
<th mat-header-cell *matHeaderCellDef> ... </th>
<td mat-cell *matCellDef="let element"> {{element....}} </td>
</ng-container>
.......
<!-- Header & Row Definitions -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" [attr.colspan]="displayedColumns.length">
Data not found
</td>
</tr>
</table>
<mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 50]" showFirstLastButtons></mat-paginator>

Continue reading...