import { Component , Inject } from '@angular/core' ; import { MatDialog , MatDialogRef , MAT_DIALOG_DATA } from '@angular/material' ; export interface DialogData { animal : string ; name : string ; } title @ Component ( { selector : 'dialog-overview-example' , templateUrl : 'dialog-overview-example.html' , styleUrls : [ 'dialog-overview-example.css' ] , } ) export class DialogOverviewExample { animal : string ; name : string ; constructor ( public dialog ) { } openDialog ( ) { 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 ; } ) ; } } @ Component ( { selector : 'dialog-overview-example-dialog' , templateUrl : 'dialog-overview-example-dialog.html' , } ) export class DialogOverviewExampleDialog { constructor ( public dialogRef , @ Inject ( MAT_DIALOG_DATA ) public data ) { } onNoClick ( ) { this . dialogRef . close ( ) ; } }