Adding sort to table headers doesn't work - ASP.NET Core 3.1 with Angular template project

Question

I'm trying to modify ASP.NET Core 3.1 with Angular template project.

In "Fetch data", I would like to be able to sort rows based on any column and direction.

I'm trying to do that with an example from Angulat materials, but it doesn't work.

The table does not appear, there are errors shown in the Screenshot1.

Could someone please help me and tell me what I am doing wrong?

I will be grateful for any help. I'm stuck for good.

fetch_data.component.ts code:

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Sort } from '@angular/material/sort'


export interface WeatherForecast {
  date: string;
  temperatureC: number;
  temperatureF: number;
  summary: string;
}

@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetch-data.component.html'
})

export class FetchDataComponent {
  public forecasts: WeatherForecast[];

  sortedData: WeatherForecast[];

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe(result => {
      this.forecasts = result;
      this.sortedData = this.forecasts.slice();
    }, error => console.error(error));

  }

  sortData(sort: Sort) {
    const data = this.forecasts.slice();
    if (!sort.active || sort.direction === '') {
      this.sortedData = data;
      return;
    }

    this.sortedData = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'date': return compare(a.date, b.date, isAsc);
        case 'temperatureC': return compare(a.temperatureC, b.temperatureC, isAsc);
        case 'temperatureF': return compare(a.temperatureF, b.temperatureF, isAsc);
        case 'summary': return compare(a.summary, b.summary, isAsc);
        default: return 0;
      }
    });
  }
}


function compare(a: number | string, b: number | string, isAsc: boolean) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

fetch_data.component.html code:

<h1 id="tableLabel">Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

<p *ngIf="!forecasts"><em>Loading...</em></p>

<table matSort (matSortChange) ="sortData($event)" class='table table-striped' aria-labelledby="tableLabel" *ngIf="forecasts">
  <thead>
    <tr>
      <th mat-sort-header="date">Date</th>
      <th mat-sort-header="temperatureC">Temp. (C)</th>
      <th mat-sort-header="temperatureF">Temp. (F)</th>
      <th mat-sort-header="summary">Summary</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let forecast of sortedData">
      <td>{{ forecast.date }}</td>
      <td>{{ forecast.temperatureC }}</td>
      <td>{{ forecast.temperatureF }}</td>
      <td>{{ forecast.summary }}</td>
    </tr>
  </tbody>
</table>

app.module.ts code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { FetchWeatherComponent } from './fetch-weather/fetch-weather.component';
import {MatSortModule} from '@angular/material/sort';

@NgModule({
  declarations: [
    MatSortModule,
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent,
    FetchWeatherComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
      { path: 'fetch-weather', component: FetchWeatherComponent },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }