title: angular mat-table trying to implement mat-sort
body: <p>I'm trying to implement mat-sort on a mat-table but I'm getting some issues when trying to initialize the mat sort functionality. 
  The sort properties are undefined: </p>
  
  <p><a href="https://i.stack.imgur.com/OS9t0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OS9t0.png" alt="enter image description here"></a></p>
  
  <p>Mat table: </p>
  
  <pre><code>&lt;mat-table matSort #sort1="matSort" matSortActive="id" matSortDirection="asc" matSortDisableClear
                                                 #table
                                                 [dataSource]="dataSource"&gt;
                                          &lt;ng-container matColumnDef="statusName"&gt;
                                              &lt;mat-header-cell *matHeaderCellDef mat-sort-header="customer.statusName"&gt;Status Name&lt;/mat-header-cell&gt;
                                              &lt;mat-cell *matCellDef="let customer"&gt;
                                                  {{customer.statusName}}
                                              &lt;/mat-cell&gt;
                                          &lt;/ng-container&gt;
                                      &lt;/mat-table&gt;
  </code></pre>
  
  <p>Component code: </p>
  
  <pre><code>@ViewChild('sort1', { static: true }) sort: MatSort;
  ngOnInit(): void {
  
      const sortSubscription = this.sort.sortChange.subscribe(() =&gt; (this.paginator.pageIndex = 0));
      this.subscriptions.push(sortSubscription);
  
      this.dataSource = new InvoiceStatusDataSource(this.invoiceStatusService);
  
      this.loadItems(true);
  }
  </code></pre>
  
  <p>in loadItems I have this: </p>
  
  <pre><code> loadItems(firstLoad: boolean = false) {
          const queryParams = new QueryParamsModel(
              {},
              this.sort.direction,
              this.sort.active,
              this.paginator.pageIndex,
              this.paginator.pageSize
          );
          this.dataSource.loadItems(queryParams);
          this.selection.clear();
      }
  </code></pre>
  
  <p>As you can see in the screenshot at the top the sort property is undefined. 
  Do I need to write some extra code to initialize that property? </p>