Angular 12 Material Dialog Example

Angular 12 Material Dialog example; Angular Material is the most popular UI components library, it provides many ready-to-use UI components, Angular Material is developed by Google. Its components help to construct attractive, consistent, and functional web pages and web applications. It is used to create a responsive and faster website.

In this article, we are going to learn how to use the Material Dialog Component so let’s start Angular 12 Material Dialog Tutorial

You can download the working example https://github.com/technostuf/angular-material-dialog-example

Angular 12 Material Dialog Example

Create a new Angular 12 app
Install Angular Material Library
Import the modules
Add code in the view file
Add code in the component ts file
Run an Angular 12 application

Step 1 – Create a new Angular 12 app

First of all, open your terminal and execute the below command to create a new Angular 12 app.

 ng new material-dialog

Step 2 – Install Angular Material Library

Use the following command to install and configure the Material library in the angular project

 ng add @angular/material

After executing above it will ask you to select a theme, Angular Material has 4 prebuild themes, Angular Material offers the following pre-built themes deep-purple-amber, indigo-pink, purple-green, and pink-blue-grey and you can select a custom theme also

For demo purposes, I have selected an indigo-pink theme, and import theme CSS into our main style.css file

/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Step 3 – Import the modules

The angular Material library provides each component as a separate module so you don’t need to import a whole module in the project, you have to just import the component which you want to use, Now we will import just the dialog module

Open your src\app\app.module.ts file and add the below code or just highlighted the code

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatDialogModule } from '@angular/material/dialog';
import { DialogContentComponent } from './dialog-content/dialog-content.component';

@NgModule({
  declarations: [
    AppComponent,
    DialogContentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatDialogModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We will load dialog content from a separate component, in this example, we will load from DialogContentComponent so it’s necessary to import in module.ts file

Step 4 – Add code in the view file

Open the src\app\app.component.html file and add the below code, For demo purposes, I have just added a button tag only

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

Open a src\app\dialog-content\dialog-content.component.html, This component’s view will be load into the dialog box, so let’s add some content

<h2 mat-dialog-title>Material Dialog Header - technostuf.com</h2>
<mat-dialog-content class="mat-typography">
    <h3>Material Dialog Content</h3>
    <p>Aptent quaerat ipsam dolores! Vulputate quisque litora nullam. Debitis massa? Blandit, dolore, unde eget? Quae,
        veniam officia facilisis! Tempora exercitation, do, ipsam? Faucibus pharetra, voluptatum, pretium? Porta.
        Turpis? Mauris id.</p>
    <p>Autem vulputate! Soluta exercitationem ligula iusto, netus sagittis diamlorem netus eleifend, ultricies ultricies
        aperiam! Sapien dolorum quisque vehicula, lacinia lacinia molestie. Sagittis numquam error augue placerat!
        Interdum alias doloribus tempus.</p>
    <p>Mollis reprehenderit ridiculus, occaecat ultricies debitis ea itaque luctus accusamus, adipisci labore qui
        repudiandae? Ullamco fames laborum. Dignissimos, phasellus tempor vestibulum eum mattis voluptate, integer
        nesciunt laborum fugiat fames quidem.</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Cancel</button>
</mat-dialog-actions>

Step 5 – Add code in the component ts file

Open the src\app\app.component.ts file and add the below code, import the DialogContentComponent and MatDialog module into the component file.

openDialog function will be called from app.component.html, we can set width, height, data to pass in the dialog view, etc… options for the configure dialog box.

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogContentComponent } from './dialog-content/dialog-content.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'material-dialog';
  constructor(private matDialog: MatDialog) {}

  openDialog(): void {
    let dialogRef = this.matDialog.open(DialogContentComponent, {
      width: '700px',
    });
  
    dialogRef.afterClosed().subscribe(result => {
    });
  }
}

in the src\app\dialog-content\dialog-content.component.ts no changes are needed as we have static content in the view file.

Step 6 – Run an Angular 12 application

Execute the following command on the terminal run the angular app.

  ng serve OR ng serve --open

–open argument will open the application in a new tab.

You can download the working example https://github.com/technostuf/angular-material-dialog-example

Angular 12 Material Dialog Example

Angular 12 Material Dialog Example

Step 1 – Create a new Angular 12 app

Step 2 – Install Angular Material Library

Step 3 – Import the modules

Step 4 – Add code in the view file

Step 5 – Add code in the component ts file

Step 6 – Run an Angular 12 application

Related Post

Leave a Comment Cancel Reply