How to set the length prop for the angular material paginator

Question

This is what my mat-paginator looks like:

<mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="100"></mat-paginator>

Basically I'm trying to implement a typical pagination idea: the server does not return all the data, it returns a chunk of it and then when a new page is opened it goes for another fraction of data. In order to do that, I need to let the paginator know how many items are there in the database, that's to say, I need to provide it with the length prop.

I tried setting it in a variety of ways, directly like in the line above or inside the method where I make a get request. Like this:

this.paginator.length = 100;

Indeed the length should come from the server but for the time being for debug purposes I simply hardcode it.

    this.dataSourceService.findAll().subscribe(
      records => {
        this.paginator.length = 100;

        this.dataSource.data = records.map(
          record => new Record().deserialize(record)
        )
      }
    )

Still the length value I get on the client is equal to the number of items contained in the array I get in the server response.

What am I doing wrong and why the length value is not set to 100.

EDIT :

Alright, here is some more relevant code.

Inside the component I do the following:

dataSource = new MatTableDataSource<Record>();
pageSizeOptions: number[] = [5, 10, 20];

inside the OnInit() I also have the following line: this.dataSource.paginator = this.paginator;

Answer 1

I'm using it like this

<mat-paginator
          [pageSize]="pageSize"
          [pageIndex]="pageNumber-1"
          [pageSizeOptions]="[10, 25, 50, 100]"
          [length]="itemCount"
          (page)="changePaging($event)"
>

lets say that the return of your observable is an object { list: [], count: xx } count is the total items (without pagination)

this.list$ = this.dataSourceService
      .findAll()
      .pipe(tap(r => (this.itemCount = r.count)));

of course you can subscribe after that for more actions...

check the docs also https://material.angular.io/components/paginator/api