Angular pagination not working in data-table

Question

I am trying to apply pagination on the data table but its not working as expected.

I have been trying to apply pagination through @viewChild. have imported necessary module.

This is my code...


import {MatPaginator} from '@angular/material';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material';

OFFER_DATA = new MatTableDataSource<IOfferItems>(this.OFFER_DATA);

@ViewChild(MatPaginator) paginator: MatPaginator;

constructor(private _offerService: OfferService){}

ngOnInit() {
    this._offerService.getOffers()
      .subscribe((offerData) => {
        this.OFFER_DATA = offerData;
        this.OFFER_DATA.paginator = this.paginator;
      });
  }



HTML - 

<table mat-table [dataSource]="OFFER_DATA" matSort class="mat-elevation-z8">
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
    <td mat-cell *matCellDef="let offer"> {{offer.id}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let offer"> {{offer.name}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
      (click)="selection.toggle(row)">
  </tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>
</mat-paginator>

it's working for me according to your code stackblitz.com/edit/… — SAURABH RATHOD
– SAURABH RATHOD, Commented Dec 31, 2018 at 10:22
It works fine with hard-coded data. In my case the data is dynamic. — md_salm
– md_salm, Commented Dec 31, 2018 at 10:35

Anil Kumar Reddy A · Accepted Answer · 2018-12-31 11:14:01Z

1

use #paginator as

<mat-paginator
    #paginator
    [pageSizeOptions]="[5, 10, 15, 20]"
    showFirstLastButtons></mat-paginator>



@ViewChild(MatPaginator) paginator: MatPaginator;

here is a sample code of mine mat-table-sort-paginator-filter

edited Dec 31, 2018 at 11:14

answered Dec 31, 2018 at 10:49

Anil Kumar Reddy A

64813 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular pagination not working in data-table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related