title: Problem sorting with matSort with API data
body: <p>My mat-table is working fine, but when adding mat-sort following the official api documentation, it fails at the ngAfterViewInit with the following message</p>
  
  <p><strong>ERROR TypeError: Cannot set property 'sort' of undefined</strong></p>
  
  <p><a href="https://i.stack.imgur.com/NnfZI.png" rel="nofollow noreferrer">First error screenshot .. Not sorting</a></p>
  
  <p>The Data are displayed correctly from the api, I moved the code to the constructor of the component to only set this in the onInit : 
  this.listData.sort = this.sort;</p>
  
  <p>I imported the module in the app.module.</p>
  
  <p>So Here is my 3 files : </p>
  
  <p>Componenet.html</p>
  
  <pre><code>  &lt;mat-table [dataSource]="listData" matSort&gt;
      &lt;ng-container matColumnDef="gender"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Gender&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.gender}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="firstname"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;First Name&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.firstname}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  </code></pre>
  
  <p>component.ts </p>
  
  <pre><code>import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
  import {PersonneService} from '../../shared/personne.service';
  import { MatTableDataSource, MatSort} from '@angular/material';
  import {Personne} from '../../personne';
  
  @Component({
    selector: 'app-personne-list',
    templateUrl: './personne-list.component.html',
    styleUrls: ['./personne-list.component.css']
  })
  export class PersonneListComponent implements AfterViewInit {
  
    personne: any = [];
    constructor(private service: PersonneService) {
      this.service.getPersonnes().subscribe((data: {}) =&gt; {
        this.personne = data;
        this.listData = new MatTableDataSource(this.personne);
      });
    }
  
    listData: MatTableDataSource&lt;Personne&gt;;
    displayedColumns: string[] = ['gender', 'firstname', 'lastname', 'address', 'city', 'state', 'ordertotal', 'actions'];
  
    @ViewChild(MatSort) sort: MatSort;
    ngAfterViewInit() {
      console.log({SORT: this.sort});
      this.listData.sort = this.sort;
    }
  
  }
  </code></pre>
  
  <p>Service.ts : </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { FormGroup, FormControl, Validators } from '@angular/forms';
  import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
  import {Personne} from '../personne';
  import {Observable} from 'rxjs';
  import {map} from 'rxjs/operators';
  
  
  @Injectable({
    providedIn: 'root'
  })
  export class PersonneService {
  
    constructor(private http: HttpClient) { }
    form: FormGroup = new FormGroup({
      firstname: new FormControl('', Validators.required),
      lastname: new FormControl('', Validators.required),
      address: new FormControl('', [Validators.minLength(8), Validators.required]),
      city: new FormControl(''),
      state: new FormControl(''),
      gender: new FormControl('1'),
      ordertotal: new FormControl('')
    });
  
    endpointGet = 'http://localhost:3000/api/personnes';
    endpointPost = 'http://localhost:3000/api/personne/';
  
    getPersonnes() {
      return this.http.get(this.endpointGet);
    }
  </code></pre>
  
  <p>While I'm writing this question, I found this answer : 
  <a href="https://stackoverflow.com/a/53112864/11295075">https://stackoverflow.com/a/53112864/11295075</a></p>
  
  <p>And I added this to the html :  [hidden]="!listData.data" matSort</p>
  
  <p>It became : <code>&lt;mat-table [dataSource]="listData" [hidden]="!listData.data" matSort&gt;</code></p>
  
  <p>Now when I click it <strong>sorts</strong> but not correctly and here is the error in the console : 
  <strong>ERROR TypeError: Cannot read property 'data' of undefined</strong></p>
  
  <p><a href="https://i.stack.imgur.com/bkvHI.png" rel="nofollow noreferrer">Second error</a></p>
  
  <p>Thank you for your help.</p>