How to Create Modal in Angular: Simple Step-by-Step Guide

To create a modal in Angular, define a component for the modal content and control its visibility using a boolean flag in the parent component. Use Angular's structural directives like *ngIf to show or hide the modal, and style it with CSS for overlay and positioning.

Syntax

Creating a modal in Angular involves three main parts:

• Modal Component: A separate component that holds the modal content.
• Parent Component: Controls when the modal is visible using a boolean flag.
• Template Directives: Use *ngIf to conditionally render the modal.

CSS styles are used to create the overlay and center the modal box.

typescript

/* modal.component.html */
<div class="modal-overlay" (click)="close()">
  <div class="modal-content" (click)="$event.stopPropagation()">
    <ng-content></ng-content>
    <button (click)="close()">Close</button>
  </div>
</div>

/* modal.component.ts */
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {
  @Output() closeModal = new EventEmitter<void>();

  close() {
    this.closeModal.emit();
  }
}

/* parent.component.html */
<button (click)="showModal = true">Open Modal</button>
<app-modal *ngIf="showModal" (closeModal)="showModal = false">
  <p>This is modal content!</p>
</app-modal>

/* parent.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  showModal = false;
}

/* modal.component.css */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 1rem;
  border-radius: 0.5rem;
  max-width: 400px;
  width: 90%;
}

Example

This example shows a button that opens a modal. The modal overlays the page with a semi-transparent background and displays content with a close button. Clicking outside the modal or the close button closes it.

typescript

/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ModalComponent } from './modal.component';

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

/* app.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="showModal = true">Open Modal</button>
    <app-modal *ngIf="showModal" (closeModal)="showModal = false">
      <h2>Welcome to Angular Modal</h2>
      <p>This modal can be closed by clicking outside or the button below.</p>
    </app-modal>
  `
})
export class AppComponent {
  showModal = false;
}

/* modal.component.ts */
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-modal',
  template: `
    <div class="modal-overlay" (click)="close()">
      <div class="modal-content" (click)="$event.stopPropagation()">
        <ng-content></ng-content>
        <button (click)="close()">Close</button>
      </div>
    </div>
  `,
  styles: [
    `.modal-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .modal-content {
      background: white;
      padding: 1rem;
      border-radius: 0.5rem;
      max-width: 400px;
      width: 90%;
    }`
  ]
})
export class ModalComponent {
  @Output() closeModal = new EventEmitter<void>();

  close() {
    this.closeModal.emit();
  }
}

Output

A page with a button labeled 'Open Modal'. Clicking it shows a centered white box with a semi-transparent dark background overlay. The box contains a heading, paragraph, and a 'Close' button. Clicking outside or the button closes the modal.

Common Pitfalls

Common mistakes when creating modals in Angular include:

• Not stopping event propagation on the modal content, causing the modal to close immediately when clicking inside.
• Forgetting to toggle the visibility flag, so the modal never appears or never closes.
• Not adding overlay styles, resulting in the modal content appearing without a background overlay.
• Placing modal HTML directly in the parent template without a separate component, which can make code messy and hard to maintain.

html

/* Wrong: Missing stopPropagation causes immediate close */
<div class="modal-overlay" (click)="close()">
  <div class="modal-content">
    <!-- Clicking inside triggers close() because event bubbles -->
  </div>
</div>

/* Right: Stop event bubbling inside modal content */
<div class="modal-overlay" (click)="close()">
  <div class="modal-content" (click)="$event.stopPropagation()">
    <!-- Modal content here -->
  </div>
</div>

Quick Reference

Tips for Angular modals:

• Use a dedicated modal component for clarity and reuse.
• Control modal visibility with a boolean flag and *ngIf.
• Use @Output events to notify parent components when to close the modal.
• Style the overlay with fixed positioning and semi-transparent background.
• Prevent clicks inside modal content from closing it by stopping event propagation.

Key Takeaways

Create a separate modal component and control its visibility with a boolean flag in the parent.

Use *ngIf to show or hide the modal and @Output events to communicate closing actions.

Style the modal overlay with fixed position and semi-transparent background for focus.

Stop event propagation on modal content clicks to prevent accidental closing.

Keep modal logic clean by separating concerns between modal and parent components.