Sunday, September 20, 2020

Open Modal Popup in Angular 6 with AngularMaterial

Open Modal Popup in Angular 6 with AngularMaterial - The Rich Post

Hello to all, welcome to 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";

  declarations: [
    AppComponent, DialogContentExampleDialog
  imports: [
  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';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  constructor(public dialog: MatDialog) {
  openDialog() {
    const dialogRef =;

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
  title = 'my-angular-app';
  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">
    Welcome to {{ title }}!
  <button mat-button (click)="openDialog()">Open dialog</button>
 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-actions align="end">
  <button mat-button mat-dialog-close>Cancel</button>

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



Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.