How to use Mat-Dialog in Angular ?

Last Updated : 26 Oct, 2020

Introduction:
Angular Material is a UI component library that is developed by the Angular team to build design components for desktop and mobile web applications. In order to install it, we need to have angular installed in our project, once you have it you can enter the below command and can download it.

Installation syntax:

ng add @angular/material

Approach:

First we need to import ‘MatDialog’ from ‘@angular/material/dialog’ and we need to create an instance for it in the constructor.
Using this instance we can open the dialog box component.
Now create a separate component for the dialog and write code as per the requirements.
In the dialog component, we need to create an instance of ‘MatDialogRef’ which we should import from ‘@angular/material/dialog’.
Import ‘MatDialogModule’ from ‘@angular/material’ in app.module.ts file.
Make sure that you are mentioning the Dialog component in entryComponents array in the module file.

Implementation of code: app.component.html:

<button mat-raised-button (click)="openDialog()"> 
    Pick one 
</button> 
<br> 
  
<span *ngIf="animal"> 
    You choose: <i>{{animal}}</i> 
<span> 

app.component.ts:

import { Component } from '@angular/core'; 
import { MatDialog } from '@angular/material'; 
  
import { ExampleDialogComponent } from './example-dialog'; 
  
@Component({ 
  selector: 'app-root', 
  templateUrl: 'app.component.html', 
}) 
export class AppComponent { 
  
  animal: string; 
  name: string; 
  
  constructor(public dialog: MatDialog) {} 
  
  openDialog(): void { 
    let dialogRef = this.dialog.open(ExampleDialogComponent, { 
      width: '250px', 
      data: { name: this.name, animal: this.animal } 
    }); 
  
    dialogRef.afterClosed().subscribe(result => { 
      this.animal = result; 
    }); 
  } 
  
} 

app.module.ts:

import { CommonModule } from '@angular/common'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { 
  MatButtonModule, 
  MatCommonModule, 
  MatFormFieldModule, 
  MatInputModule, 
} from '@angular/material'; 
  
import { AppComponent } from './example.component'; 
import { ExampleDialogModule } from './example-dialog'; 
  
@NgModule({ 
  declarations: [AppComponent], 
  exports: [AppComponent], 
  imports: [ 
    ExampleDialogModule, 
    CommonModule, 
    FormsModule, 
    MatButtonModule, 
    MatCommonModule, 
    MatFormFieldModule, 
    MatInputModule, 
  ], 
}) 
export class AppModule {} 

example-dialog.component.html:

<h1 mat-dialog-title>Welcome user</h1> 
<div mat-dialog-content> 
  <p>What's your favorite animal?</p> 
  <mat-form-field> 
    <input matInput [(ngModel)]="data.animal"> 
  </mat-form-field> 
</div> 
<div mat-dialog-actions> 
  <button mat-button (click)="onCancel()">No Thanks</button> 
  <button mat-button [mat-dialog-close]="data.animal"  
             cdkFocusInitial>Ok</button> 
</div> 

example-dialog.component.ts:

import { Component, Inject } from '@angular/core'; 
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; 
  
@Component({ 
  selector: 'app-example-dialog', 
  templateUrl: 'example-dialog.component.html', 
}) 
export class ExampleDialogComponent { 
  
  constructor( 
    public dialogRef: MatDialogRef<ExampleDialogComponent>, 
    @Inject(MAT_DIALOG_DATA) public data: any) { } 
  
  onCancel(): void { 
    this.dialogRef.close(); 
  } 
  
}

example-dialog.module.ts:

import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { 
  MatButtonModule, 
  MatCommonModule, 
  MatDialogModule, 
  MatFormFieldModule, 
  MatInputModule, 
} from '@angular/material'; 
  
import { ExampleDialogComponent } from './example-dialog.component'; 
  
@NgModule({ 
  declarations: [ExampleDialogComponent], 
  entryComponents: [ExampleDialogComponent], 
  imports: [ 
    FormsModule, 
    MatButtonModule, 
    MatCommonModule, 
    MatDialogModule, 
    MatFormFieldModule, 
    MatInputModule, 
  ], 
}) 
export class ExampleDialogModule {} 