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:

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:

app.component.ts:

app.module.ts:

example-dialog.component.html:

example-dialog.component.ts:

example-dialog.module.ts:

Output:

👁 Image

Output when the dialog box is opened:

👁 Image

Output when the entered value is displayed on the screen:

👁 Image