title: Angular 12 table header sort is undefined
body: <p>I'm working on an upgrade from Angular 8 to 12 and got some errors. Most of them are fixed. The only one left is this one
  <a href="https://i.stack.imgur.com/sFQcN.png" rel="nofollow noreferrer">The error</a></p>
  <p>This error means that the <code>sortChange</code> is undefined. The data is displayed in the table. I use this code for the sort function:</p>
  <pre><code>ngOnInit(): void {       
  this.currentPageIndex = 0;
  this.currentPageSize = this.paginationSettings.defaultPageSize;
  
  this.setDataSource(this.entities);
  
  this.sort.sortChange.subscribe((sort: Sort) =&gt; {
    debugger;
    return this.sortChanged(sort);
  });
  }
  </code></pre>
  <p>When the view is loaded I set the event this.sort</p>
  <pre><code>  ngAfterViewInit() {
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }
  </code></pre>
  <p>The value if variables are</p>
  <pre><code>  @ViewChild(MatTable, { static: true }) table: MatTable&lt;any&gt;;
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ContentChild(MatSort, { static: true }) sort: MatSort;
    @ContentChildren(MatHeaderRowDef) headerRowDefs!: QueryList&lt;MatHeaderRowDef&gt;;
    @ContentChildren(MatRowDef) rowDefs!: QueryList&lt;MatRowDef&lt;TEntity&gt;&gt;
    @ContentChildren(MatColumnDef, { descendants: true }) columnDefs!: QueryList&lt;MatColumnDef&gt;;
    @Input() entities: TEntity[]; (the data source)
  </code></pre>
  <p>The HTML:</p>
  <pre><code>&lt;!-- user component --&gt;
  &lt;lq-list
      matSort
      (settingsChanged)=&quot;listSettingsChanged.emit($event)&quot;
      [entities]=&quot;users&quot;
      [isLoading]=&quot;isLoading&quot;
      [displayedColumns]=&quot;displayedColumns&quot;
      [paginationSettings]=&quot;paginationSettings&quot;
      [totalEntityCount]=&quot;totalUserCount&quot;
      &gt;
      &lt;ng-container matColumnDef=&quot;email&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Email &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.email}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef=&quot;firstName&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Voornaam &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.firstName}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef=&quot;lastName&quot;&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Achternaam &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.lastName}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot; [routerLink]=&quot;['/users/', row.id]&quot; class=&quot;pointer&quot;&gt;&lt;/mat-row&gt;
  &lt;/lq-list&gt;
  
  </code></pre>
  <pre><code>&lt;!-- the container--&gt;
  &lt;mat-table [dataSource]=&quot;dataSource&quot;&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/mat-table&gt;
  &lt;lq-paginator
      (page)=&quot;paginationSettingsChanged($event)&quot;
      [totalEntityCount]=&quot;totalEntityCount&quot;
      [paginationSettings]=&quot;paginationSettings&quot;
  &gt;&lt;/lq-paginator&gt;
  </code></pre>
  <p>The ts table component</p>
  <pre><code>import { Component, Input, EventEmitter, Output, ViewChild, OnInit, AfterViewInit, SimpleChanges, OnChanges } from '@angular/core';
  import { User } from '@app/users/models/user';
  import { PaginationSettings } from '@app/core/constants/list-pagination-settings';
  import { ListSettingsChangedEvent } from '@app/core/models/list-settings-changed-event';
  
  @Component({
    selector: 'lq-user-list',
    templateUrl: './user-list.component.html',
    styleUrls: ['./user-list.component.scss'],
  })
  export class UsersListComponent {
    /**
     * The user entities to display
     * @type {User[]}
     * @memberof UsersListComponent
     */
    @Input() users: User[];
  
    /**
     * Indicator whether the list is loading
     * @type {boolean}
     * @memberof UsersListComponent
     */
    @Input() isLoading: boolean;
  
    /**
     * Pagination settings
     * @type {PaginationSettings}
     * @memberof UsersListComponent
     */
    @Input() paginationSettings: PaginationSettings;
  
    /**
     * The total user count
     * @type {number}
     * @memberof UsersListComponent
     */
    @Input() totalUserCount: number;
  
    /**
     * The event emitter for when the list settings have changed
     * @type {EventEmitter&lt;ListSettingsChangedEvent&gt;}
     * @memberof UsersListComponent
     */
    @Output() listSettingsChanged: EventEmitter&lt;ListSettingsChangedEvent&gt; = new EventEmitter&lt;ListSettingsChangedEvent&gt;();
  
    /**
     * The columns to display
     * @type {string[]}
     * @memberof UsersListComponent
     */
    displayedColumns: string[] = ['email', 'firstName', 'lastName'];
  }
  </code></pre>