Angular material 2 - mat-paginator [length] issue

Question

I am trying to use the mat-paginator for a table where I want to show data retrieved via an HTTP call, but the problem I have is that I cannot set the length of the paginator to the total number of the results I get from the API. In this example, the length is hardcoded in the component, but it shoudn't be a problem (I tried also to set it on the view as [length]="100" and it doesn't work). Here is the HTML:

<mat-table #table1="matSort" [dataSource]="dataSource1" matSort>

   <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef>
            <mat-checkbox name="all" class="" [checked]="isAllChecked()" (change)="checkAll($event)" *ngIf="bulkView"></mat-checkbox>
        </mat-header-cell>
        <mat-cell *matCellDef="let element"> 
            <mat-checkbox class="" [checked]="isAllRowsSelected" [(ngModel)]="element.state" *ngIf="bulkView"></mat-checkbox>
        </mat-cell>
   </ng-container>

    <ng-container matColumnDef="firstName">
        <mat-header-cell *matHeaderCellDef mat-sort-header="CompanyAgent"> First name </mat-header-cell>
        <mat-cell *matCellDef="let element">
            <img class="personal-data-table__img" src="/assets/app/media/img/users/100_3.jpg" alt="user" width="50" />
                {{element.firstName}} 
        </mat-cell>
    </ng-container>

    <ng-container matColumnDef="lastName">
        <mat-header-cell *matHeaderCellDef mat-sort-header="CompanyEmail"> Last name </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.lastName}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="city">
        <mat-header-cell *matHeaderCellDef mat-sort-header="Website"> City </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.city}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="actions">
        <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
        <mat-cell *matCellDef="let element"> 
            <span class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill"> 
                <i class="la la-ellipsis-h"></i> 
            </span>
            <span class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" (click)="editPersonalDataItem(element.RecordID)">
                <i class="la la-edit"></i>                      
            </span>
            <span class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill"> 
                <i class="la la-trash"></i> 
            </span>
        </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 #paginator1
    [length]="pag1.pageLength"
    [pageSize]="pag1.pageSize"
    [pageSizeOptions]="pag1.pageSizeOptions"
    [pageIndex]="pag1.pageIndex"
    (page)="onPaginateChange1($event)">
</mat-paginator>

and the component:

pag1 = {
    pageSize: 10,
    pageSizeOptions: [5, 10, 20],
    pageIndex: 0,
    pageLength: 100
  };

@ViewChild('paginator1') paginator1: MatPaginator;

this.route.data.subscribe(data => {
    this.personalData = data.users.data.persons;
    this.dataSource1 = new MatTableDataSource(this.personalData);
    this.dataSource1.paginator = this.paginator1;
    console.log('this.paginator1: ', this.paginator1);
});

When I console.log this.paginator1, I can see the _length set to 100, but when I open the object, I see the value which is displayed in the browser (10).

The data is displaying fine in the browser, the only problem I have is that the paginator always shows 1-10 of 10 and I want it to show 1-10 of x, where x is the value I get from the API for the total number of items. Please advise. Thanks!

Answer 1

This comment by @user4676340 is the right answer to this question:

Oooooooooooooh I didn't get that you had a pagination in the back-end, not the front-end ! Sorry, my bad. In this case, your first guess was right, except for one thing : you should not bind your paginator to your table. Because in your case, the paginator has nothing to do with your table, it only handles the data. My guess is that this binding to the table is the issue here

(I don't have privilege to convert that comment to an answer so this is what it is)