mdb angular datatable not working with pagination

Question

I am trying to follow the tutorial here:

https://mdbootstrap.com/docs/angular/tables/datatables/

But the issues is I get an error whenever I try to do anything with the pagination.

Cannot read property 'setMaxVisibleItemsNumberTo' of undefined

My Html looks like this:

<table class="table-striped table-hover z-depth-1" stickyHeader="true" #productsTable="mdbTable"
    mdbTable *ngIf="!loading && products && products.length">
    <thead class="sticky-top">
        <tr>
            <th *ngFor="let head of headers; let i = index" [mdbTableSort]="products"
                [sortBy]="headers[i]" scope="col">{{head | titlecase}} <mdb-icon fas icon="sort">
                </mdb-icon>
            </th>
        </tr>
    </thead>
    <tbody #row>
        <tr mdbTableCol *ngFor="let product of products; let i = index">
            <th *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
                scope="row">{{product.gtin}}</th>
            <td
                *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                {{product.title}}</td>
            <td
                *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                {{product.retailer}}</td>
            <td
                *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                {{product.currency}}</td>
            <td
                *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                {{product.price}}</td>
        </tr>
    </tbody>
    <tfoot class="grey lighten-5 w-100">
        <tr>
            <td colspan="4">
                <mdb-table-pagination paginationAlign="" [tableEl]="productsTable"
                    [searchDataSource]="products"></mdb-table-pagination>
            </td>
        </tr>
    </tfoot>
</table>

and the component code looks like this:

@ViewChild(MdbTableDirective, { static: true }) mdbTable: MdbTableDirective;
@ViewChild(MdbTablePaginationComponent, { static: true }) mdbTablePagination: MdbTablePaginationComponent;
@Input() feedId: number;
products: any[];

headers: any[] = ['gtin', 'title', 'retailer', 'currency', 'price'];
maxVisibleItems: number = 10;

constructor(private cdRef: ChangeDetectorRef, private feedService: FeedService) {}

ngOnInit() {        
    this.list();
}

ngAfterViewInit() {
    this.cdRef.detectChanges();
}

private list() {
    this.feedService.listProducts(this.feedId).subscribe(products => {
        this.mdbTablePagination.setMaxVisibleItemsNumberTo(this.maxVisibleItems);

        this.mdbTablePagination.calculateFirstItemIndex();
        this.mdbTablePagination.calculateLastItemIndex();

        this.products = products;

        this.mdbTable.setDataSource(this.products);
    });
}

Does anyone know why it isn't working?

Answer 1

Move the pagination code after your setDataSource method

this.feedService.listProducts(this.feedId).subscribe(products => {
  this.products = products;
  this.mdbTable.setDataSource(this.products);      

  // Move pagination code after setting datasource
  this.mdbTablePagination.setMaxVisibleItemsNumberTo(this.maxVisibleItems);
  this.mdbTablePagination.calculateFirstItemIndex();
  this.mdbTablePagination.calculateLastItemIndex();   
});