Я получаю диалоговое окно, которое не найдено после того, как я следую руководству по дизайну материалов

Question

Ссылка ниже - это диалоговое окно материального дизайна, за которым я следил. Но я получаю сообщение об ошибке, как показано ниже. Тогда как мне отправить объект или значения в диалоговое окно, используя это?

https://stackblitz.com/angular/gjvdejyenoyv?file=src%2Fapp%2Fdialog-content-example.ts

Ошибка

Диалог не определен

html

<td mat-cell *matCellDef="let user">
    <button  (click)="openDialog(user)"  mat-icon-button color="primary" matTooltip="Edit item">
        <mat-icon>create</mat-icon>
    </button>
    <button mat-icon-button color="warn" type="button" matTooltip="Delete item">
        <mat-icon>delete</mat-icon>
    </button>
</td>

ts файл

// Angular
import {
    Component,
    OnInit,
    ViewChild,
    ViewEncapsulation,
    Input,
} from "@angular/core";
import { SelectionModel } from "@angular/cdk/collections";
import {
    MatButtonModule,
    MatSort,
    MatPaginator,
    MatIconModule,
    MatPaginatorModule,
    MatProgressSpinnerModule,
    MatSortModule,
    MatTableModule,
    MatDialog,
    matDialogAnimations,
} from "@angular/material";


@Component({
    selector: "kt-dashboard-table",
    templateUrl: "./dashboard-table.component.html",
    encapsulation: ViewEncapsulation.None,
    styleUrls: ["./dashboard-table.component.scss"],
})
export class DashboardTableComponent implements OnInit {



    constructor(
        private dataTableService: DataTableService,
        public dialog: MatDialog
    ) {}

    openDialog(user) {
        console.log(user);
        debugger;
        const dialogRef = this.dialog.open(DialogContent);

        dialogRef.afterClosed().subscribe((result) => {
            console.log(`Dialog result: ${result}`);
        });
    }
}

@Component({
    selector: "dashboard.component.dialog",
    templateUrl: "dashboard.component.dialog.html",
})
export class DialogContent {}