Learn Angular : Modal Popup | Angular Material MatDialog

You can also follow the video tutorial on YouTube.

In this Angular tutorial, you’ll learn how to show Popup in Angular application using Angular Material modal component MatDialog.

Setting up the Angular application

For the sake of this tutorial, I have created an Angular application using Angular CLI. Once the boilerplate code has been created, you need to install Bootstrap and Angular Material in your application.

Adding Material Modal Popup

Open the app.module.ts file and import the MatDialogModule and include it to the imports array.

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

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

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

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

For showing some content inside the modal pop up, let’s create a new component.

ng g component pop-up

Add the following HTML code to pop-up.component.html file.

<h2> Welcome </h2>
<button  class="btn btn-primary">
  Press
</button>

Inside app.component.ts file, import MatDialog and create an instance of it.

import { MatDialog } from  '@angular/material/dialog';

constructor(private  dialogRef : MatDialog){}

Create a method called openDialog which uses the MatDialog instance to open the PopUpComponent component in modal popup.

  openDialog(){
    this.dialogRef.open(PopUpComponent);
  }

Add the following HTML code to app.component.html file to add a button which triggers modal popup on click.

<button  class="btn btn-primary"  (click)="openDialog()">
  Click to open pop up
</button>

Save the above changes and start the Angular application. On clicking the button, you’ll be able to see the PopUpComponent inside the modal popup.

Passing Data To Modal Popup

You can also pass data to modal popup from the parent component. Let’s pass some data to the modal pop up. Modify the openDialog method in app.component.ts file to pass data to the modal popup.

  openDialog(){
    this.dialogRef.open(PopUpComponent,{
      data : {
        name : 'Samuel'
      }
    });
  }

Inside the modal popup component pop-up.component.ts file, inject MAT_DIALOG_DATA and parse the data passed to the modal popup.

import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-pop-up',
  templateUrl: './pop-up.component.html',
  styleUrls: ['./pop-up.component.css']
})
export class PopUpComponent implements OnInit {

  firstName;
  constructor(@Inject(MAT_DIALOG_DATA) public data) {
    this.firstName = data.name
  }

  ngOnInit(): void {
  }
  
}

Modify the pop-up.component.html file code to display the passed firstName.

<h2> Welcome  </h2>

<button class="btn btn-primary">
    Press
</button>

Save the above changes and click on the button. You will be able to see the modal popup with the passed in name.

Wrapping it up

In this Angular tutorial, you learnt how to show pop up in Angular application using Angular material modal component MatDialog. You also learnt how to pass data from parent component to the modal popup component.

Source code from this tutorial is available on GitHub.