Introduction to Angular material dialog

Angular material provides us dialog which can be used to show as a popup to the user, asking for the action that needs to be taken. It basically used as the confirmation dialog, to take yes or no from the user. But we can use them for any different purpose, like if you want to show a small functionality or a registration form to the user. Material provides us an inbuilt module to create this type dialog easily and fast in our application. Material comes up with default styling and animations as well, in order to use this dialog, we require to import the necessary packages inside the application and use a specific tag on the template to view or create the dialog using the material library. In the coming section of the tutorial, we will see its implementation in detail for better clarity and understanding.

Syntax:

In this section we will see the syntax to use dialog inside our application, proper configuration we will see in the coming section of the tutorial. Let’s taken a closer look at the syntax for better understanding see below;

<div mat-dialog-content>
// inside this content will go ,,//
</div>
<div mat-dialog-actions>
// we can take or perform any action here ..//
</div>

As you can see in the above syntax we are trying to use ‘mat-dialog-content’ to create our dialog in angular using the material library. Full practice example we will see in the coming section of the tutorial, of a better understanding of the implementation.

How dialog works in Angular material?

As of now we already know that dialog is pretty much direct to create inside our application. In this section, we will have closer look at the full steps and configuration needed for the dialog created using the material library for which we will use the in-build module and directive provided by the material framework. Let’s get started to see below;

1) MatDialogModule: This is a module provided by the material library which can be used to create the dialog in the application, this has to be present inside the root module or any of the child modules in order to use this, else we will get an error and dialog will not be visible. For reference follow the below code and place it inside the root module see below;

e.g. :

import {MatDialogModule} from '@angular/material/dialog';

2) mat-dialog-close: This will help to close the current dialog. Below see the syntax to use ;

e.g. :

<mat-dialog-close></mat-dialog-close>

3) mat-dialog-title: This is used to show the title of the dialog. below see reference code:

e.g. :

<mat-dialog-title></mat-dialog-title>

4) mat-dialog-content: This contains the content for the dialog box, below see the syntax to use this in code:

e.g. :

<mat-dialog-content></mat-dialog-content>

Below are the necessary steps to step angular and material project, follow to get started;

Angular CLI is important to be in place, it makes us enable to cerate our angular project with ease and very quickly. We can type in the below line of command on the command prompt it will install CLI for us as global;

e.g. :

npm install -g @angular/cli)

3) In the third step we can now create the angular project just by type in the below command, we should name our angular project as we want. The command will start from ‘ng new’ after this we can give our own project name, below is the reference command;

syntax :

ng new your project name

e.g. :

ng new my-first-project

we can create this project inside any directory, after the successful completion of the command you will see a folder created on the mentioned path.

4) Now we will install all the required dependencies of the angular project just by running the below command, so this will install all the required packages and dependencies for us. That we can use later in the project to create our component.

e.g. :

npm install

5) Now we are all set to start our angular application, can we can see the default implementation by running it on local with the default port of 4200. run below command on the command prompt to see changes;

e.g. :

ng serve

6) We can now access our angular application by the below URL :

e.g. :

http://localhps:4200

7) But till now we do not have angular material in place inside the angular project, for that we need to install and execute one more command, which will turn install all the material packages and modules inside our application

e.g. :

ng add @angular/material

That’s it we are ready to go with the application using the material library.

Example

1) index.html code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<title>Dialog demo material</title>
</head>
<body class="mat-app-background">
<dialog-demo>Loading ..</dialog-demo>
<span class="version-info">Current build: 12.1.1</span>
</body>
</html>

2) module.ts code:

import {NgModule} from '@angular/core';
import {MatDialogModule} from '@angular/material/dialog';
@NgModule({
exports: [
MatDialogModule,
]
})
export class DialogMaterialDemo {}

3) demo.dialog.component.ts code :

import {Component} from '@angular/core';
import {MatDialog} from '@angular/material/dialog';
/**
* @title Demo Dialog
*/
@Component({
selector: 'dialog-demo',
templateUrl: 'demo.dialog.component.html',
})
export class DemoDialogComponen {
constructor(public dialog: MatDialog) {}
openDialog() {
const dialogRef = this.dialog.open(DialogContent);
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
});
}
}
@Component({
selector: 'dialog-content-demo',
templateUrl: 'demo.dialog.component.dialog-content.html',
})
export class DialogContent {}

4) demo.dialog.component.html code :

<h5><u><i>Dialog demo using angular material !!!</i></u></h5>
<button mat-stroked-button (click)="openDialog()">Click Me!!</button>

5) demo.dialog.component.dialog-content.html code :

<h2 mat-dialog-title>Educba Plateform</h2>
<mat-dialog-content class="mat-typography">
<h3>Learning and traning platforms</h3>
<img src="https://lh5.googleusercontent.com/p/AF1QipN_aupGaqTiv5_xbfKTl2qZz0XAJlGMt0WucgkU=w319-h100-k-no" alt="Photos of educba">
<p>
eduCBA is an online education provider, teaches you real-world skills in everything from Investment Banking to Programming to Project Management to Design & many more.
</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button>
<button mat-button [mat-dialog-close]="true" cdkFocusInitial>Ok</button>
</mat-dialog-actions>

Output :

Before click :

After click :

Conclusion

By the use of it, we can easily create the dialog, and perform the action of it, for which it provides s ‘mat-dialog-actions’. This material dialog comes up with default styling and animations which look more attractive and user-friendly as well. It is easy to maintain, understanding, and handle by the developers.

Quiz Result
Total Questions	Correct Answers	Wrong Answers	Percentage

Introduction to Angular material dialog

How dialog works in Angular material?

Example

Conclusion

Recommended Articles

About Us

Apps

Resources

Certification Courses