matSort не сортирует из шапки

Question

Привет, у меня проблемы с настройкой matSort для работы с любым из столбцов.

Мне, должно быть, не хватает чего-то маленького, но я не знаю, что это такое.

Вот мой HTML:

    <mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8 mb-4">
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
      <ng-container matColumnDef="label">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Label </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.label}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="value">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Value </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="disabled">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Enable / Disable </mat-header-cell>
        <mat-cell *matCellDef="let element"> <button type="button" class="btn btn-primary" (click)="toggleDisable()">Enable</button> </mat-cell>
      </ng-container>
    </mat-table>

Вот мой файл component.ts:

import {Component, OnInit, ViewChild} from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';

interface PeriodicElement {
  label: string;
  value: string;
  disabled: boolean;
}

const ELEMENT_DATA: PeriodicElement[] = [
  { label: 'efg', value: 'efg', disabled: false },
  {label: 'a', value: 'a', disabled: false },
  { label: 'b', value: 'b', disabled: false },
  { label: 'c', value: 'c', disabled: false },
];

@Component({
  templateUrl: './edit-catalog.component.html',
})
export class EditCatalogComponent implements OnInit, OnDestroy {
  displayedColumns: string[] = ['label', 'value', 'disabled'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  @ViewChild(MatSort) sort: MatSort;

  constructor() {}

  ngOnInit() {
    this.dataSource.sort = this.sort;
  }

Следовал документации, я уверен, что это неосторожная ошибка, но я определенно не вижу ее в данный момент.

Возможно, отсутствует синтаксис в html-файле?

Я также импортировал MatSortModule и MatTableModule в файл modules.ts