Open Modal Popup in Angular 6 with AngularMaterial

Hello to all, welcome to therichpost.com. In this post, I will tell you, Open Modal Popup in Angular 6 with AngularMaterial.

Angular Material is getting more popularity day by day because with the help of Angular Material, we can build angular app more attractive and well designing.

I am sharing the code for modal popup and hope this helps.

Here is the working modal popup picture:

Here are the following steps to open modal popup in Angular 6:

1. First you need to run below command into your terminal to include angular material into your angular 6 app:

npm install --save @angular/material @angular/cdk @angular/animations

2. After that, please add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent, DialogContentExampleDialog } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from "@angular/material";

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

 3. After that, please add below code into your app.component.ts file:

import {Component} from '@angular/core';
import {MatDialog} from '@angular/material';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  constructor(public dialog: MatDialog) {
  }
  
  openDialog() {
    const dialogRef = this.dialog.open(DialogContentExampleDialog);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }
  
  title = 'my-angular-app';
  
}
@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: 'dialog-content-example-dialog.html',
})
export class DialogContentExampleDialog {}

 4. After that, please add below code into your app.component.html file:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <button mat-button (click)="openDialog()">Open dialog</button>
</div>

 5. After that, please add make new file named dialog-content-example-dialog.html into your app folder and add below code inside it:

<h2 mat-dialog-title>Modal PopUP</h2>
<mat-dialog-content class="mat-typography">
  <h3>The Rich Post</h3>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancel</button>
</mat-dialog-actions>

 And you are done, If you have any query related to this post, then ask questions or comment below.