Angular Material Dialog Complete Guide

In this article explain I am going a explain how to create a dialog in angular project.For this tutorial I am gone use one of the most famous Material UI Angular library. I contain feature packed dialog component which we can use for any project.

This article contain following section

1.How to install plugin and create a simple dialog
2.How to disable dialog close when clicking outside
3.Material dialog useful configurations options
4.How to pass data to the material dialog
5.How to passing data when closing the dialog
6.How to install the plugin and create a simple dialog
7.Before creating a modal first you must install the required 8.packages using the following command.

How to install the plugin and create a simple dialog

Before creating a modal first you must install the required packages using the following command.

ng add @angular/material 

This will install Angular Material, the Component Dev Kit (CDK) and Angular Animations. Also, it will ask for the theme, global typography and setup browser animation. Make sure to select yes for browser animation. Otherwise, most of the animation in the Material module will not work.

Next, you can add the required material module to the angular module file. In this tutorial, I am using a fresh project and the only module which I have is the app module. You can add this to any module which you are hoping to use the dialog.

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

@NgModule({

  imports: [
    ....
    MatDialogModule,
  ]
})

Let’s create a component to use as a dialog. Execute the following command and it will create a detail-dialog component under the component folder.

ng g c component/detail-dialog

Open the Html file of the created component and add the following HTML part.

<h1 mat-dialog-title>User Details</h1>
<div mat-dialog-content>
    <p>Name : Shan</p>
</div>
<div mat-dialog-actions>
  <button mat-button mat-dialog-close>Close</button>
</div>

In here you can see mainly 3 attributes.

1.mat-dialog-title – This is used to define the title of the dialog.
2.mat-dialog-content – Inside this div you can specify the content of the dialog
3.mat-dialog-actions – In here you can specify the list of action buttons. This will show at the bottom of the dialog.
Now you need a way to show the dialog when someone triggers an action. Therefore let’s add a button to the main AppComponent.

<button (click)="showDialog()">Show Contact Dialog</button>

Inside the app.component.ts file you need to add the trigger event.

Here,first, we need to inject the MatDialog service from the constructor. MatDialog service contains the open method which accepts dialog component as a first parameter.

import { MatDialog } from '@angular/material/dialog';
import { DetailDialogComponent } from './component/detail-dialog/detail-dialog.component';


export class AppComponent {
  title = 'dialog-app';

  constructor(private matDialog:MatDialog){

  }

  showDialog(){
    this.matDialog.open(DetailDialogComponent)
  }
}

When you click the button now you will be able to see a simple dialog.

How to disable dialog close when clicking outside

Default when user clicks outside of the dialog it gets closed. This behaviour can be changed by setting disableClose to true in the MatDialogConfig.

First, create an object of MatDialogConfig class and set disableClose property to true.

showDialog(){
    const mdConfig = new MatDialogConfig();
    mdConfig.disableClose = true;

    this.matDialog.open(DetailDialogComponent,mdConfig)
  }

Also you can just set those configurations like below.

this.matDialog.open(DetailDialogComponent,{width:"500px",direction: "rtl"})

Check complete article here

Connect with me - Instagram |Blog |Youtube