Angular Material Paginator not working with async data

Question

I have an Angular Material Data Table and I am trying to add pagination to it.

I have come across this problem that if the data is an async source then Mat-Paginator doesn't work.

I tried with Sync source and Pagination works as expected but as I have an observable the pagination does not get initialized when the data finally arrives.

However, I have tried searching for this problem and so far no one seems to be having this problem so it may be down to my setup.

Following is my ts file for my component.

import { Component, Input, Output, EventEmitter, style, Inject, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { Country} from '../../core/models/country';
import { OnChanges, AfterViewInit } from '@angular/core';
import { MatTableDataSource, MatPaginator } from '@angular/material';

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'app-country-list',
    templateUrl: './country-preview-list.html',
    styleUrls : ['./country-preview-list.css']
})
export class CountryListComponent implements OnChanges, AfterViewInit {
    @Input() public countries: Country[];
    displayedColumns = ['Name', 'Code'];
    dataSource: MatTableDataSource<Country>;

    @ViewChild(MatPaginator) paginator: MatPaginator;

    ngOnChanges(): void {
        this.dataSource = new MatTableDataSource<Country>(this.countries);
    }

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

}

and Parent component html has this line to add my component

<app-country-list [countries]="countries$ | async"></app-country-list>

Edit

Parent Component TS file

import { Component, ChangeDetectionStrategy, OnChanges } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { take } from 'rxjs/operators';

import * as fromCountries from '../../state/countries/reducers';
import * as fromConfiguration from '../../state/configuration/reducers';
import * as country from '../../state/countries/actions/countries';
import * as configuration from '../../state/configuration/actions/configuration';
import { Country} from '../../core/models/country';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({
  selector: 'app-countries-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <app-country-search (searchCountries)="search($event)"></app-country-search>
    <app-country-list [countries]="countries$ | async"></app-country-list>
  `,
})
export class CountriesPageComponent {
  countries$: Observable<Country[]>;

  constructor(private store: Store<fromCountries.State>) {
    this.countries$ = store.pipe(select(fromCountries.getAllCountries));
  }

  search(query: any) {
    this.store.dispatch(new country.Search(query));
  }

}

if change countries$ | async to a synchronous list of countries; paginator works.

Can someone please help. Thanks

Answer 1

Your last comment help me find the solution to this. This is indeed caused by the fact that the dataTable is inside a ngIf*.

The issue is described here in more detail.

To solve the problem remove this code:

@ViewChild(MatPaginator) paginator: MatPaginator;

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

and add this:

private paginator: MatPaginator;

@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
  this.paginator = mp;
  this.dataSource.paginator = this.paginator;
}