Modal Popup Example and Tutorial with Angular 10 Material

In this tutorial, we’ll build by example a modal popup using Angular 10 Material.

Angular Material provides modern UI components for building user interfaces based on the material design specification that works across the web, mobile, and desktop.

Step 1: Creating an Angular 10 Project

Open a new command-line interface and run the following command:

$ ng new angular-modal-example

Step 2: Installing and Setting up Angular 10 Material

Navigate inside the project’s folder and begin by installing hammerjs as follows:

$ cd angular-modal-example
$ npm install --save hammerjs

Hammer.js adds support for touch support.

Next, install Angular Material and Angular Animations using the following commands:

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

Now, include hammerjs in the angular.json file.

Step 3: Creating the Custom Material Module File

Navigate to the src/app folder, create one module file named material.module.ts:

$ cd src/app
$ touch material.module.ts

Open the src/app/material.module.ts file and update it as follows:

import { NgModule } from '@angular/core';

import { MatDialogModule, MatFormFieldModule, MatButtonModule, MatInputModule } 
         from '@angular/material';
import { FormsModule } from '@angular/forms';

@NgModule({
  exports: [FormsModule, MatDialogModule, MatFormFieldModule, MatButtonModule, MatInputModule]
})
export class MaterialModule {}

Step 4: Importing a Theme and Material Icons

Angular Material provides many pre-built themes. Open the styles.css file and add:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Next open the index.html file and add:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Next, open the src/app/app.module.ts file and import the material.module.ts and BrowserAnimationsModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

import { AppComponent } from './app.component';

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

Step 5: Implementing the Angular 10 Material Modal Dialog

Now, open the src/app.component.ts file, and import MatDialog, MatDialogRef, MAT_DIALOG_DATA:

import { Component, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

interface DialogData {
  email: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

Next, create an Angular component by running the following command from the root of your project:

ng generate component modal --module app --spec=false

Open the src/app/modal/modal.component.ts file and update it as follows:

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

interface DialogData {
  email: string;
}

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

  constructor(
    public dialogRef: MatDialogRef<modalcomponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

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

  ngOnInit() {
  }
}

Open the src/app/modal/modal.component.html file and add the following markup:

<h1 mat-dialog-title>Want to receive our emails?</h1>
<div mat-dialog-content>
  <p>What's your email?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.email">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No</button>
  <button mat-button [mat-dialog-close]="data.email" cdkFocusInitial>Yes</button>
</div>

Next, open the src/app/app.component.ts file and update it as follows:

import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { ModalComponent } from './modal/modal.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  email: string;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(ModalComponent, {
      width: '300px',
      data: {}
    });

    dialogRef.afterClosed().subscribe(result => {
      this.email = result;
    });
  }
}

First, we import the modal component in the src/app/app.component.ts file. Next, we defined the openDialog() method which opens the ModalComponent

When the user closes the modal component, the App component receives the value of the email entered in ModalComponent.

Next, open the src/app/app.component.html file and the following markup:

<div>

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

    <br />
    <div *ngIf="email">
      You signed up with: <p></p>
    </div>
</div>

Open the src/app/app.module.ts file and add the modal component inside the entryComponents array of the module as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

import { AppComponent } from './app.component';
import { ModalComponent } from './modal/modal.component';

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

That’s it. Now, let’s test our modal dialog by serving our Angular application from the terminal:

$ ng serve

The server will be running from the http://localhost:4200.

Conclusion

In this quick example, we have created a popup modal dialog with Angular Material and Angular 10.