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:

javascript

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:

html

<button mat-raised-button (click)="openDialog()">
    Pick one
</button>
<br>

<span *ngIf="animal">
    You choose: <i>{{animal}}</i>
<span>

app.component.ts:

javascript

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:

javascript

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:

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:

javascript

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:

javascript

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 {}