To properly connect your MatTableDataSource to the paginator, you need to ensure that the paginator is instantiated first. This can be achieved by listening to the AfterViewInit hooks and accessing the paginator with

@ViewChild(MatPaginator) paginator: MatPaginator;

Since your data is asynchronous, follow these steps:

1. Create an empty DataSource initially.
2. Populate the dataSource once your data is fetched.
3. Link the paginator after the view has been fully rendered.

Give it a try and see if this approach works for you!

export class YourComponent implements AfterViewInit {

  private matdatasource;

  // Access the paginator element
  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor (private http: HttpClient) {
    // Step 1: Initialize DataSource
    this.matdatasource = new MatTableDataSource([]);
    this.http.get('http://example.org',{headers: this.headers})
      .subscribe(res => { 
        // Step 2: Populate Data
        this.matdatasource.data = res.data;
      });
  }
   
  // Step 3: Link the paginator when the empty dataSource is ready and paginator is rendered
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }
  
}

To start, create an instance of the paginator

@ViewChild(MatPaginator) paginator: MatPaginator;

Next, fill in the dataSource with your data

this.matdatasource = new MatTableDataSource([])

Lastly, connect the paginator to the dataSource for functionality

this.dataSource.paginator = this.paginator;

For more information on this topic, refer to this link

If you're looking for a simple solution to set up your database and data source, consider using @matheo/datasource. It streamlines the process and eliminates any headaches along the way.

Having worked with various APIs that include different pagination responses (including those without pagination like Firebase), I have successfully managed total counts for all scenarios without any issues.

For more information, visit:
https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6

If you decide to use the library and need assistance with your specific use case, feel free to reach out. Happy coding!

Presented here is a simplified version of the concept proposed by @mateo-tibaquira. The key points are as follows:

• Utilizing DataSource in combination with Observable to capture the transient loading state and any errors that may occur during the service call.
• Adjusting the paginator's length based on the total count obtained from the backend service call.
• Introducing a generic class Page<T> to encapsulate the response array of type T, along with essential pagination details: pageSize, pageIndex, and totalCount.
• Assumption that the backend calls support pagination parameters compatible with <mat-table> and <mat-paginator>.

This code draws inspiration from, and heavily relies on, the well-crafted Angular Material blog post titled Angular Material Data Table: A Complete Example (Server Pagination, Filtering, Sorting).

custom-data-source.ts

import { map, catchError, finalize,
         debounceTime, distinctUntilChanged, startWith, tap, delay 
       } from "rxjs/operators";

import { CollectionViewer, DataSource } from "@angular/cdk/collections";
import { MatPaginator }                 from '@angular/material';

import { Page } from '../model/page';

export class CustomDataSource<T> implements DataSource<T>, Observer<Page<T>> 
{
    private items = new BehaviorSubject<Page<T>>( new Page<T>() );
    private loading = new BehaviorSubject<boolean>(false);
    private err = new BehaviorSubject<any>( {} );

    protected paginator: MatPaginator;

    items$ = this.items.asObservable();
    loading$ = this.loading.asObservable();
    error$ = this.err.asObservable();

    closed = false;

    constructor( protected itemType: string ) {
    }

    next( results: Page<T> ) : void {
        console.debug( "Found items: ", this.itemType, results );
        if ( this.paginator ) {
            this.paginator.length = results.totalCount;
        }
        this.items.next( results );
    }
    error( errr: any ) : void {
        console.error( "Error loading items: ", this.itemType, errr );
        this.err.next( errr );
    }
    complete() : void {
        console.debug( "Done loading items.", this.itemType );
        this.loading.next( false );
    }

    connect( collectionViewer: CollectionViewer ) : Observable<Page<T>> {
        this.closed = false;
        return this.items$;
    }

    disconnect( collectionViewer: CollectionViewer ): void {
        this.closed = true;
        this.items.complete();
        this.loading.complete();
        this.err.complete();
    }

    protected preLoad() : void {
        this.err.next( {} );
        this.loading.next( true );
    }

    setPaginator( pgntr: MatPaginator ) : void {
        this.paginator = pgntr;
    }
}

model/page.ts

export class Page<T> extends Array<T> {
    public static readonly DEFAULT_PAGE_SIZE: number = 10;

    pageIndex: number;
    pageSize: number;
    totalCount: number;

    constructor( pgIx?: number, pgSize?: number, tot?: number, items?: T[] )
    {
        super();
        this.pageIndex = pgIx ? pgIx : 0;
        this.pageSize = pgSize ? pgSize : 0;
        this.totalCount = tot ? tot : 0;
        if ( items && items.length > 0 ) {
            this.push( ...items );
        }
    }
}

xyz-data-source.ts

import { Xyz } from '../model/xyz';
import { CustomDataSource } from './custom-data-source';
import { XyzService } from '../service/xyz-service';

export class XyzDataSource extends CustomDataSource<Xyz>
{
    constructor( private xyzService: XyzService ) {
        super( 'Xyz' );
    }

    loadXyz( offset: number = 0, limit: number = 10, predicates?: any ) : void
    {
        this.preLoad();

        this.xyzService
            .searchXyz( offset, limit, predicates )
            .subscribe( this );
    }    
}