How to force paginator length even when connected to a dataSource?

I have a mat-table with a data source and I have created pagination for it which loads the next few entries every time you move to the next page. My query returns the total amount of results so I want to always show the total amount on my paginator (1 out of x) instead of showing the total length of the dataSource as the maximum.

I know that when you set the dataSource.paginator = this.paginator it automatically does the connection but no piece of code I thought of could overwrite it. I have tried linking the [length]="numberOfHits" but it doesn't take.

Also, I don't wish to handle the dataSource seperetaly (meaning I won't connect it to the paginator) because then the table lazy loads by adding more rows to it and not by switching the page to the next one.

.html:

<table
mat-table
[dataSource]="dataSource"
*ngIf="!loadingData; else loading"
class="row"
>
...
</table>

<mat-paginator
#paginator
[pageSize]="pageSize"
[pageSizeOptions]="paginatorPageSizeOptions"
[pageIndex]="currentPage"
(page)="onPageChange($event)"
></mat-paginator>


.ts:

createTable() {
this.dataSource = new MatTableDataSource();
this.dataSource.paginator = this.paginator;
}


I expect the length property of the paginator to be overwritten when I type this.paginator = this.numberOfHits.

EDIT: I have tried this already but no success:

<mat-paginator
#paginator
[length]="numberOfHits"
[pageSize]="pageSize"
[pageSizeOptions]="paginatorPageSizeOptions"
[pageIndex]="currentPage"
(page)="onPageChange($event)"
></mat-paginator>


It does work on first startup but once I switch the page to the next one it goes back to show the dataSource length.

Continue reading...