Sorting and pagination not working on Angular 5 data table.

Question

I am trying to use this Angular material 5 data table component in my project: https://stackblitz.com/angular/jyerrrrdxrp?file=polyfills.ts that features filtering, sorting and pagination. So far, my data are properly fetched from the database and displayed in the table but can't make sorting and pagination working.

My HTML:

    <app-header></app-header>
<div class="example-header">
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
</div>

<div *ngIf="dataSource.data.length === 0">
  There were no applicants found.
</div>
<div *ngIf="dataSource.data.length > 0">
  <div class="example-container mat-elevation-z8">
    <mat-table [dataSource]="dataSource" matSort>

      <!-- ID Column -->
      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.applicantId}} </mat-cell>
      </ng-container>

      <!-- First Name Column -->
      <ng-container matColumnDef="fname">
        <mat-header-cell *matHeaderCellDef mat-sort-header> First Name </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.applicantFirstName}} </mat-cell>
      </ng-container>

      <!-- Last Name Column -->
      <ng-container matColumnDef="lname">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Last Name </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.applicantLastName}} </mat-cell>
      </ng-container>

      <!-- Status Column -->
      <ng-container matColumnDef="status">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
        <mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.applicantStatus.applicationStatusDescription}} </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;">
      </mat-row>
    </mat-table>

    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>
</div>

My TS:

 import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { APIService } from '../shared/api.service';
import { Router } from '@angular/router';
import { DataService } from '../shared/data.service';

@Component({
  selector: 'app-reviewerhome',
  templateUrl: './reviewerhome.component.html',
  styleUrls: ['./reviewerhome.component.css']
})
export class ReviewerhomeComponent implements OnInit {
  displayedColumns = ['id', 'fname', 'lname', 'status'];
  dataSource: MatTableDataSource<ApplicantData>;
  datalist:any = [];
  ApplicantIndex: any;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;


  constructor(private apiService: APIService, dataService: DataService, private router: Router) {

  }

  ngOnInit() {
   this.apiService.getAllApplicants(this.ApplicantIndex).subscribe(datalist => {
     console.log('Return from getAllApplicants()');
     this.datalist = datalist;


     this.dataSource = new MatTableDataSource(datalist.content);
     console.log(datalist);
     }); 

  }

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

  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
}


export interface ApplicantData {
  id: number;
  fname: string;
  lname: string;
  status: string;
}

Any insight into what might be going wrong?

Answer 1

The problem was that I did not import MatSortModule and MatPaginatorModule in my app.module.ts.

imports: [
MatSortModule,
MatPaginatorModule 
]

Once I added them, it worked fine.