Угловой материал MatDialog Не работает для Angular-6

Question

Я новичок в материале Angular / Angular, и я пытался использовать MatDialog

Я следовал этой инструкции, но она мне не подходит MatDialog-Обзор

Любой знает, как правильно использовать MatDialog?

код стекаблиц здесь

Мой код

   <!--Add new button-->
    <div class="d-flex flex-row-reverse bd-highlight">
      <div class="p-2 bd-highlight"><button mat-flat-button class="btn-sg"  color="primary"  style=" width:200px; color: white " (click)="openDialog()" >+ Add New</button></div>
    </div>
    <!--/ End Add new button-->

.ts

import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';


 openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: {name: this.name, animal: this.animal}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

Спасибо

Answer 1

в вашем стеке отсутствует класс компонента диалога.

import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'Dialogpge',
  templateUrl: 'Dialogpge.html',
})
export class Dialogpge {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
}

есть и импортируйте его в файл main.ts и dialog-Overview-example.ts.

Здесь (https://stackblitz.com/edit/angular-hxh2vi-unhrrq) - рабочая версия stackblitz, разветвленная из вашей версии