Paginator length being set to page size instead of defined length (http pagination)

Bug, feature request, or proposal:

I’m trying to implement HTTP pagination as exemplified on documents with my own API. The problem is that the total items count (length) is being set incorrectly!

My code follows exactly the same thing of the example.

What is the expected behavior?

It should just respect the value that I set. On my code, I use my API response (total) to set the paginators length, just as on the docs example.

What is the current behavior?

Looks like the length “blinks” from the total given by API to the current page length.

For example, if I load a resource that have a total of 9 items, and the page size is 5, imediatelly after it load, I can see (very fast) the total of 9, with the next button enabled, then it goes to 5 (the page length, not the total).

If in the same same, I set page size to 10, it shows the total of 9 (right, because the page 1 have exactly 9).

Looks like this is a behavior from non http pagination, where it try to paginate from the entire dataset.

What are the steps to reproduce?

Cannot provide a plunker right now, but the relevant code is:

ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;

    merge(this.sort.sortChange, this.paginator.page)
      .pipe(
        startWith({}),
        switchMap(() => {
            this.isLoadingResults = true;
            return this.modelProvider.list({page: this.paginator.pageIndex + 1, size: this.paginator.pageSize});
        }),
        map((collection: Collection<any>) => {
          this.isLoadingResults = false;
          this.resultsLength = collection.meta.total;

          return collection.data;
        }),
        catchError(() => {
          this.isLoadingResults = false;
          return observableOf([]);
        })
      ).subscribe(data => this.dataSource.data = data );
  }
ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;

    merge(this.sort.sortChange, this.paginator.page)
      .pipe(
        startWith({}),
        switchMap(() => {
            this.isLoadingResults = true;
            return this.modelProvider.list({page: this.paginator.pageIndex + 1, size: this.paginator.pageSize});
        }),
        map((collection: Collection<any>) => {
          this.isLoadingResults = false;
          this.resultsLength = collection.meta.total;

          return collection.data;
        }),
        catchError(() => {
          this.isLoadingResults = false;
          return observableOf([]);
        })
      ).subscribe(data => this.dataSource.data = data );
  }

And my paginator on view is defined:

<mat-paginator #paginator
               [length]="resultsLength"
               [pageSize]="5"
               [pageSizeOptions]="[5, 10, 20]"
               *ngIf="paginate">
</mat-paginator>

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

The latest available versions, I’ve just installed everything.

[narendrasinghrathore]

@andrewseguin When i move to next page and make a http call, paginator length is changed to length of table datasource.data i am just updating the totalLength only if it’s 0 .

if(this.totalLength === 0){ this.totalLength = data.total; }

<mat-paginator #paginator [length]="totalLength" [pageSize]="limit" [pageSizeOptions]="pageLimit" (page)="changePage($event)"> </mat-paginator>

[rakeshg2t]

It solves when I use a flag to *ngIf the page and toggle before and after the rest call executes. I showed a spinner when *ngIf is false.

TS :

this.service
 .get('pools/calculations',{ pageNumber: page?page:this.page, pageSize: pSize?pSize:this.pSize })
 .then(data => {
   this.isLoadingResults=false;
   const ELEMENT_DATA =data.searchResults;
   this.dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
   this.dataSource.paginator = this.paginator;
   if (data.pagingInfo && typeof data.pagingInfo == "object") {
     this.pageSize = data.pagingInfo.pageSize;
     this.listLength = data.pagingInfo.totalRows;
     this.pageNumber = data.pagingInfo.pageNumber;
     }
 })

HTML:

<div class="loading-indicator">
    <mat-spinner *ngIf="isLoadingResults" class></mat-spinner>
</div>

<div class="example-container mat-elevation-z8" *ngIf="!isLoadingResults">
    <mat-table #table [dataSource]="dataSource">

        <!-- Name Column -->
        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.poolName}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="symbol">
            <mat-header-cell *matHeaderCellDef> Updated </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

    </mat-table>

    <mat-paginator #paginator [pageIndex]="pageNumber" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="listLength" (page)="pageEvent($event)">
    </mat-paginator>
</div>

But if I remove the ngIf the problem occours.