Question

How to open a modal popup on button click in Angular 8?

I'm trying to open a modal popup when a button is clicked in my Angular 8 application. Can someone guide me on how to implement this?

Answer 1

1. Install Angular Material (Optional)

If you want to use Angular Material for modals:

ng add @angular/material

2. Create a Modal Component

Generate a new component for the modal:

ng generate component modal

3. Add Modal Logic in the Modal Component

In modal.component.html:

<h2>Modal Content</h2>

<p>This is a modal popup!</p>

<button (click)="close()">Close</button>

In modal.component.ts:

import { Component, Inject } from '@angular/core';

import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

@Component({

  selector: 'app-modal',

  templateUrl: './modal.component.html',

})

export class ModalComponent {

  constructor(public dialogRef: MatDialogRef<ModalComponent>) {}

  close(): void {

    this.dialogRef.close();

  }

}

4. Open Modal on Button Click

In your main component (app.component.ts or others):

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

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

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

})

export class AppComponent {

  constructor(public dialog: MatDialog) {}


  openModal(): void {

    this.dialog.open(ModalComponent, {

      width: '300px',

      data: { message: 'This is a modal popup!' },

    });

  }

}

5. Add Button to Open Modal

In app.component.html:

<button (click)="openModal()">Open Modal</button>

6. Import MatDialogModule

Add MatDialogModule to your AppModule:

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

@NgModule({

  declarations: [AppComponent, ModalComponent],

  imports: [BrowserModule, MatDialogModule],

  providers: [],

  bootstrap: [AppComponent],

  entryComponents: [ModalComponent],

})

export class AppModule {}

 Use Information{

• Create a new component for the Modal using ng generate component Angular_Modal

• Draw the template:

<div class="modal-overlay" (click)="closeModal()">

  <div class="modal-content" (click)="$event.stopPropagation()">

    <h2>Pop-up Modal</h2>

    <p>Hi Welcome to Edureka</p>

    <button (click)="closeModal()">Close</button>

  </div>

</div>

• Add logic related to modal in relevant component: 

    export class Angular_ModalComponent {

          @Output() close = new EventEmitter<void>();

          closeModal(): void {

            this.close.emit();

          }

}

}

• Add the Modal into a AppComponent Template: 

        <button (click)="show()">Show Modal</button>

<app-angular-modal *ngIf="isVisible" (close)="hide()"></app-angular-modal>

• Update the logic in AppComponent:

export class AppComponent {

  isVisible= false;

  show() {

    this.isVisible = true;

  }

  hide() {

    this.isVisible = false;

  }

}