title: mat-sort and mat-paginator not working on Angular Material mat-table
body: <p>I was trying to use the mat-sort and mat-paginator on my Material table which does not seem to work. The Table does get the data in the dataSource.data and it is also shown in the mat-table, but the dataSource.sort and dataSource.paginator properties stay <em>undefined</em>. I have tried to assign the values to both the properties in both ngOnInit() and ngAfterViewInit() as suggested in the other similar questions like the one here: <a href="https://stackoverflow.com/questions/48731798/mat-sort-not-working-on-mat-table">mat-sort not working on mat-table</a>, but nothing seems to work. Below is the code for the same. The version of Angular Material is 8.2.3 and the version of Angular is 8.3.25. I'll be glad for any help. Thanks in advance :)</p>
  
  <p>employees-list.component.ts</p>
  
  <pre><code>import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
  import { RestApiService } from '../shared/rest-api.service';
  import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material'; // Service used for Snackbar, Dialog,
  
  
  @Component({
    selector: 'app-employees-list',
    templateUrl: './employees-list.component.html',
    styleUrls: ['./employees-list.component.scss']
  })
  export class EmployeesListComponent implements OnInit, AfterViewInit {
  
    public Employee: any = [];
    public dataSource: any;
    @ViewChild(MatSort, { static: true }) sort: MatSort;
    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  
    displayedColumns: string[] = ['id', 'name', 'email', 'phone', 'actions'];
  
    constructor(public restApi: RestApiService) { }
  
    ngOnInit() {
      this.loadEmployees();
    }
  
    // Get employees list
    loadEmployees() {
      return this.restApi.getEmployees().subscribe((data: {}) =&gt; {
        console.log(data);
        this.Employee = data;
        this.dataSource = new MatTableDataSource(this.Employee);
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
        console.log(this.dataSource);
      });
    }
  
    ngAfterViewInit() {
    }
  
    // Delete employee
    deleteEmployee(id) {
      if (window.confirm('Are you sure, you want to delete?')) {
        this.restApi.deleteEmployee(id).subscribe(data =&gt; {
          this.loadEmployees();
        });
      }
    }
  
  }
  </code></pre>
  
  <p>employees-list.component.html</p>
  
  <pre><code>&lt;div *ngIf="Employee.length !== 0"&gt;
  
    &lt;span class="mat-headline"&gt;Employee List&lt;/span&gt;
  
    &lt;table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8" &gt;
  
      &lt;ng-container matColumnDef="id"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; User ID &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt; {{element.id}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
  
      &lt;ng-container matColumnDef="name"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Name &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt; {{element.name}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
  
      &lt;ng-container matColumnDef="email"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Email &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt; {{element.email}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
  
      &lt;ng-container matColumnDef="phone"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Phone &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt; {{element.phone}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="actions"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Actions &lt;/th&gt;   
        &lt;td mat-cell *matCellDef="let element"&gt; 
          &lt;button mat-raised-button routerLink="/employee-edit/{{element.id}}" color="primary"
          style="margin-right: 0.25rem;"&gt;&lt;mat-icon&gt;edit&lt;/mat-icon&gt;&lt;/button&gt; 
          &lt;button mat-raised-button (click)="deleteEmployee(element.id)" color="warn"&gt;&lt;mat-icon&gt;delete&lt;/mat-icon&gt;&lt;/button&gt; 
        &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>