Элемент управления вкладкой материала Angular 7 со списком

У меня есть последние версии Angular и последняя версия материального компонента для него. Я пытаюсь отобразить таблицу, которая находится внутри Tab Control. Однако я не могу смонтировать операцию сортировки. Пожалуйста помоги. Вот код: Вид:

<div class = "container">
  <div id = "content">
    <div id = "main-content">
      <div>
        <mat-form-field>
          <input matInput placeholder = "Category Name" name = "keyword" [(ngModel)] = "keyword">
        </mat-form-field>
        <mat-checkbox [(ngModel)] = "isActive" name = "isActive">Active only</mat-checkbox>
        <button mat-button type = "button">Search</button>
      </div>
      <mat-tab-group (selectedTabChange) = "onTabChange($event)">
        <mat-tab [label] = "sysCategory.name" *ngFor = "let sysCategory of systemCategories">
          <div>
            <table mat-table matSort matSortDisableClear [dataSource] = "dataSource?.items" class = "mat-elevation-z4">
              <tr>
                <ng-container matColumnDef = "name">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header>Category</th>
                  <td mat-cell *matCellDef = "let element">
                    <mat-form-field *ngIf = "element.inEditMode">
                      <input matInput placeholder = "Category" required maxlength = "255" [(ngModel)] = "element.name" />
                    </mat-form-field>
                    <span *ngIf = "!element.inEditMode">{{element.name}}</span>
                  </td>
                </ng-container>
              </tr>
              <tr mat-header-row *matHeaderRowDef = "displayedColumns"></tr>
              <tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>
            </table>
          </div>
        </mat-tab>
      </mat-tab-group>
    </div>
  </div>
</div>

Компонент:

export class CategoriesListComponent implements OnInit, AfterViewInit {
  displayedColumns: string[] = ['name', 'delete', 'edit'];
  dataSource: ResultsList<CategoryModel>;

  systemCategories: SystemCategoryModel[];
  sysCategoryId: number;
  isActive = true;
  keyword: '';

  @ViewChild(MatSort) sort: MatSort = new MatSort();

  constructor(private systemCategoriesService: DictionaryService, private categoriesService: CategoriesService) { }

  ngOnInit() {
    this.systemCategoriesService.getDictionary<SystemCategoryModel>(SystemCategoriesUrl)
      .subscribe(v => { this.systemCategories = v; });
  }

  ngAfterViewInit() {
    // S.O.S it doesnt work here for sure!
    // this.sort.sortChange.subscribe(() => this.loadGrid());
  }

  onTabChange(tabChangeEvent: MatTabChangeEvent) {
    this.sysCategoryId = this.systemCategories[tabChangeEvent.index].id;
    this.loadGrid();
  }

  loadGrid() {
    const query = this.createQuery();
    this.categoriesService.load(query).subscribe(v => this.dataSource = v);
  }

  private createQuery(): CategoriesSearchQuery {
    return {
      isActive: this.isActive,
      keyword: this.keyword,
      pageIndex: 0,
      pageSize: 1000,
      sortField: this.sort && this.sort.active || 'name',
      isDesc: this.sort && this.sort.direction === 'desc' || false,
      systemCategoryId: this.sysCategoryId
    };
  }