title: Angular material matSort does not work
body: <p>I receive data through http request, the paginator and filter work, but the sorting directive does not work without any error. Therefore, I don't know where I was wrong, please help me out of this.</p>
  
  <p>Here is my code:</p>
  
  <p>component.ts:</p>
  
  <pre><code>displayedColumns = ['token name', 'industry'];
    dataSource = new MatTableDataSource();
    id: any;
    resultsLength = 0;
    pageSize = 5;
  
    tokens: Tokens[];
  
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
  
    constructor(private apiService: ApiService) { }
  
    ngOnInit() {
      this.loadTokens();
    }
  
    loadTokens() {
      this.apiService.getTokens()
      .subscribe((data: any) =&gt; {
        this.tokens = data;
        this.dataSource.data = this.tokens;
        console.log(this.dataSource);
        this.resultsLength = this.tokens.length;
      }, error =&gt; {
        console.log(error);
      });
    }
  
    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;
    }
  </code></pre>
  
  <p>component.html:</p>
  
  <pre><code>&lt;mat-table [dataSource]="dataSource" matSort&gt;              
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;
      &lt;/mat-row&gt;
  
      &lt;ng-container matColumnDef="token name"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; TOKEN NAME &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let row"&gt; {{row.name}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="industry"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; INDUSTRY &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let row" [style.color]=""&gt; {{row.description}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
    &lt;/mat-table&gt;
  
    &lt;mat-paginator #paginator [pageSize]="pageSize" [length]="resultsLength"&gt;&lt;/mat-paginator&gt;
  </code></pre>