Angular Modal

A modal refers to a popup or dialog in the Web development. It is possible to implement a modal with Vanilla JavaScript (An application made only with HTML, CSS, and JS). But Angular provides additional features that make sharing the status of a modal between components easy and help reduce repetition of codes. With that said, let's see one way of implementing the modal using Angular. 

---

First let's see what we need
1. modal Component (Provides a common feature and the layout)
2. modal Service (Manages the status of modals)
3. Individual Modal Component (Carries out functions that are specific to a individual modla component)

Common Modal Component

A common modal provides a common feature and layout. 

// modal.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { ModalService } from 'src/app/services/modal.service';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css'],
})
export class ModalComponent implements OnInit {  
  @Input() modalId = ''
  constructor(public modalService: ModalService) {}

  ngOnInit(): void {}
}

This component defines the layout and styles that are used through out all the modal components and handles a common behavior such as showing or hiding the modal components. Since all the modal components can share this common feature it helps reduce code repetition.

<!-- modal.component.html -->

<div class="container" [ngStyle]="{display:modalService.getIsOpen(modalId) ? '' : 'none'}">
  <div class="box" style="width: 500px; height: 400px; background-color: antiquewhite; z-index: 2;">
    <ng-content select="[heading]"></ng-content>    
    <button (click)="modalService.closeModal('auth')">Close</button>
    <ng-content></ng-content>
  </div>
  <div (click)="modalService.closeModal(modalId)" class="shade"></div>
</div>

Modal Service

A service is used to make sharing data between components ease. A modal service manages the status of each modal and returns the status of each modal which improves a synchronized behavior accross all components.

// modalService.ts

import { Injectable } from '@angular/core';
import { Modal } from '../models/modal';
@Injectable({ providedIn: 'root' })
export class ModalService {
  modals: Modal[] = []; // holds all the modals registered
  constructor() {}

  // changes the open status of a modal
  closeModal(id:string) {    
    const modal = this.modals.find(m => m.id === id);
    if(modal) {
      modal.isOpen = !modal.isOpen;
    }
  }

  // returns a modal that matches the id with the open status
  getIsOpen(id:string) : boolean {
    return !!this.modals.find(m => m.id === id)?.isOpen;
  }

  // registers a modal to the array of modals
  register(id: string) {
    this.modals.push({
      id: id,
      isOpen: false,
    });
  }
  
  // removes a modal from the modal array
  unRegister(id:string) {
  	this.modals = this.modals.filter(m => m.id !== id)
  }
}

Modal Model

A model is a class or an interface used to specify attributes of an object. Though this is not a must for this demonstration, this feature tells Angular about the type of an object so we don't have to specify the type each time we create the modal object.

// modal.ts

export interface Modal {
  id: string,
  isOpen: boolean,
}

Individual Modal Component

An inndividual modal component specifies features and layout that is unique to its own.

// auth-modal.component.ts

import { Component, OnInit } from '@angular/core';
import { ModalService } from 'src/app/services/modal.service';

@Component({
  selector: 'app-auth-modal',
  templateUrl: './auth-modal.component.html',
  styleUrls: ['./auth-modal.component.css'],
})
export class AuthModalComponent implements OnInit, OnDestory {
  constructor(private modalService: ModalService) {}

  // registers a modal
  ngOnInit(): void {
    this.modalService.register('auth')
  }
  
  // removes a modal when the component is destroyed
  ngOnDestroy(): void {
  	this.modalService.unRegister('auth')
  }
}

<!-- auth-modal.component.html -->

<app-modal [modalId]="'auth'">
  <p heading>title</p>

  <ul style="display: flex; list-style: none; align-items: center; justify-content: space-around;">
    <li>Login</li>
    <li>Join</li>
  </ul>

  <form action="" style="width: 100%; text-align: center;">
    <label for="">login</label>
    <div>
      <input type="text">
      <input type="text">
    </div>
  </form>

  <form action="" style="width: 100%; text-align: center;">
    <label for="">join</label>
    <div>
      <input type="text">
      <input type="text"><input type="text">
      <input type="text">
    </div>
  </form>
</app-modal>

As you can see in the example, an Id is registered for each modal. The id is used to differentiate each modal when there exist more than one and to enable to open one modal at a time using the id which is done in modal service.

<!-- auth-modal.component.html -->

<app-modal [modalId]="'auth'">
  <p heading>title</p>

  <ul style="display: flex; list-style: none; align-items: center; justify-content: space-around;">
    <li>Login</li>
    <li>Join</li>
  </ul>

  <form action="" style="width: 100%; text-align: center;">
    <label for="">login</label>
    <div>
      <input type="text">
      <input type="text">
    </div>
  </form>

  <form action="" style="width: 100%; text-align: center;">
    <label for="">join</label>
    <div>
      <input type="text">
      <input type="text"><input type="text">
      <input type="text">
    </div>
  </form>
</app-modal>

<!-- additional -->
<app-modal [modalId]="'test'">
  dummy
</app-modal>

In this writing, we have seen one way of implementing a modal using angular.