CODEWITHSUNDEEP
angularrxjsobservableangular-material2ngrx
Robert Dinaro
Robert Dinaro

Reputation: 538

Angular Material Paginator not working with async data

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

Upvotes: 5

Views: 11756

Answers (2)

Luis Fernando
Luis Fernando

Reputation: 1304

In case you need a loading(async) then after loading you need to render the table and set the paginate async. try this

component.html

<loading-component *ngIf="isLoading$ | async"></loading-component> <--WHILE Loading

<div *ngIf="!(isLoading$ | async)"> <-- AFTER Loading
    <ng-container *ngIf="dataSource.data.length >= 1; else noData">  <--Check if there's data
        <table mat-table [dataSource]="dataSource">
            ...
        </table>
 <mat-paginator></mat-paginator>
    </ng-container>
    <ng-template #noData>  <- In case there is not data (to not show the table/table-header)
        ...
    </ng-template>
</div>

component.ts

import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { Observable } from 'rxjs/Observable';

export class Component {
  dataSource = new MatTableDataSource<any>();
  isLoading$: Observable<boolean>;  
  private _paginator: MatPaginator;
  
@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) { <--SET you can fetch (async)
    this._paginator = mp;
    this.dataSource.paginator = this._paginator;
  }
  .. the rest of the component logic ...

With the SET you can fetch async data to table and then paginate it.

Keep coding \m/

Upvotes: 0

Tonio
Tonio

Reputation: 5014

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;
}

Upvotes: 11

Related Questions