Angular Material Modal is a built-in module filled with significant, modern UI components that work across the web, mobile, and desktop applications. The MatDialog service can open modal dialogs with Material Design styling and animations.

Here is the step-by-step guide to implementing the material dialog modal in Angular.

Step 1: Setup Angular 18 project

If you have not installed Angular CLI, you can install it using the below command:

npm install -g @angular/cli

Now, you can create a new Angular project using the below command:

ng new dialog-app

Go inside the project folder:

cd dialog-app

Step 2: Install Angular Material

You can add the Angular Material module to your project using the below command:

ng add @angular/material

Step 3: Create a dropdown component

You can generate a new angular component using this command:

ng generate component material-dialog

Step 4: Import Angular Material Modules

We must import the MatDialogModule and any other Material modules for dialog in the src/app/app.component.ts file:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, MatDialogModule, MatButtonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})

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

Step 5: Add an HTML for Dropdown

Open src/app/material-dialog/material-dialog.component.html and add the following HTML code:

<h1 mat-dialog-title class="dialog-title">Dialog Title</h1>

<div mat-dialog-content class="dialog-content">
  <p>This is the dialog content</p>
</div>

<div mat-dialog-actions class="dialog-actions">
    <button mat-flat-button color="primary" (click)="onNoClick()">Close</button>
</div>

In the material-dialog.component.ts, add a method to close the dialog:

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-material-dialog',
  standalone: true,
  imports: [],
  templateUrl: './material-dialog.component.html',
  styleUrl: './material-dialog.component.css',
})

export class MaterialDialogComponent {
  constructor(public dialogRef: MatDialogRef<MaterialDialogComponent>) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

Step 6: Open the Dialog from Another Component

To open the dialog, inject the MatDialog service into the component from which you want to trigger the dialog.

For example, you can add the below code in src/app/app.component.ts:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';

import { MaterialDialogComponent } from './material-dialog/material-dialog.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, MatDialogModule, MatButtonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})

export class AppComponent {
  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(MaterialDialogComponent, {
      width: '400px',
    });

    dialogRef.afterClosed().subscribe((result) => {
      console.log('The dialog was closed');
    });
  }
}

In this code, we used the MatDialog service to open the MaterialDialog component by creating a reference.

Then, we used the afterClosed() function on that dialog reference. So, when the dialog is closed, we log the statement.

Step 7: Add a trigger button in the app component

Open the src/app/app.component.html file and add a button to trigger the dialog:

<button mat-button (click)="openDialog()">Open Dialog</button>

Add custom styles to your dialog by defining CSS classes in the dialog component’s stylesheet.

Add the following code inside the material-dialog.component.css file:

::ng-deep .mat-dialog-container {
  border-radius: 12px;
  padding: 24px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.dialog-title {
  font-size: 24px;
  font-weight: 600;
  color: #3f51b5;
  margin-bottom: 16px;
}

.dialog-content {
  font-size: 16px;
  color: #333;
  margin-bottom: 24px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
}

.dialog-actions button {
  font-weight: 600;
  color: #3f51b5;
}

Step 8: Testing the Angular Dialog

Go to the root of your Angular project, open the terminal, and start the development server using this command:

ng serve --open

Go to this URL: http://localhost:4200/, and you will see something like this:

If you click on the “Open Dialog” button from the above screenshot, you will a modal like this:

That’s it!