สร้าง Modal ด้วย Angular และ Bootstrap

ในบทความนี้ผมจะพามาสร้าง Modal ง่ายๆ ด้วยการใช้ Angular และ Bootstrap หลายๆครั้ง ถ้าเราใช้งาน Modal ผิดวิธีก็ทำให้ระบบเราทำงานช้าลงได้นะ เดียวพามาทำการสร้าง Modal จนถึงขั้นตอนการเรียกใช้งานครับ

การติดตั้งแพ็กเกจ

เพื่อเริ่มต้น เราจะใช้ @ng-bootstrap/ng-bootstrap เพื่อให้ Modal ของเรามีฟังก์ชันการทำงานที่ครบถ้วนและใช้งานง่ายขึ้น พร้อมติดตั้ง Bootstrap เพื่อตกแต่งสไตล์สวยๆ

npm install @ng-bootstrap/ng-bootstrap bootstrap

จากนั้นเราต้องเพิ่มไฟล์ CSS ของ Bootstrap ใน angular.json เพื่อให้ใช้งานได้

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

การสร้าง Modal Component

ในตัวอย่างนี้เราสร้าง ConfirmModalComponent ซึ่งจะเป็นหน้าต่างยืนยันโดยมีปุ่มสองปุ่มให้เลือก (ยกเลิก และยืนยัน) ไฟล์: confirm-modal.component.html

<div class="d-flex flex-column p-3 modal-box">
  <span class="modal-close d-flex flex-row-reverse" (click)="activeModal.close('dismiss')" aria-hidden="true">✕</span>
  <div class="header-modal">
    <div ngIf="data.title" class="text">{{ data.title }}</div>
    <div class="text">{{ data.info }}</div>
  </div>
  <div class="d-flex justify-content-center mt-3 gap-4">
    <button data-testid="buttonCancel" class="btn btn-secondary" (click)="activeModal.close('dismiss')"
      ngIf="!data.infoMode">
      ยกเลิก
    </button>
    <button data-testid="buttonConfirm" class="btn btn-ais" (click)="activeModal.close('confirm')">
      ยืนยัน
    </button>
  </div>
</div>

ไฟล์: confirm-modal.component.scss

.header-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-bc {
  background-color: #111;
  color: white;
}

.modal-close {
  cursor: pointer;
}

ไฟล์: confirm-modal.component.ts

import { Component, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-confirm-modal',
  templateUrl: './confirm-modal.component.html',
  styleUrls: ['./confirm-modal.component.scss'],
})
export class ConfirmModalComponent {
  @Input()
  data!: { info?: string; title?: string; infoMode?: boolean; };
  buttonText = "ยืนยัน";
  activeModal: NgbActiveModal;

  constructor(private ngbActiveModal: NgbActiveModal) {
    this.activeModal = this.ngbActiveModal;
  }
}

Modal Service

การเรียกใช้งาน Modal เราได้สร้าง ModalService สำหรับเปิดหรือปิด Modal โดยกำหนดค่าให้สามารถส่งข้อมูลได้ บทความ sessionStorageService

ไฟล์: modal/modal.service.ts

import { Injectable } from '@angular/core';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { SessionStorageService } from '../service/session-storage/session-storage.service';

@Injectable()
export class ModalService {
  modalRef!: NgbModalRef;

  constructor(
    private modalService: NgbModal,
    private sessionStorageService: SessionStorageService,
  ) { }

  open<T>(content: Partial<T>, modalContent: unknown): NgbModalRef {
    const isOverlap =
      this.sessionStorageService.getItem('isModalOverlap') === 'true';
    if (!isOverlap) {
      this.modalRef = this.modalService.open(modalContent, {
        centered: true,
        backdrop: 'static',
        keyboard: false,
      });
      this.modalRef.componentInstance.data = content;
    }
    return this.modalRef;
  }

  close() {
    this.modalRef?.close();
  }
}

ไฟล์: modal/modal.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModalService } from './modal.service';

@NgModule({
  imports: [CommonModule],
  providers: [ModalService],
})
export class ModalModule {}

การเรียกใช้งาน Modal

เมื่อ Modal พร้อมใช้งานแล้ว เราสามารถเรียก Modal และส่งข้อมูลให้แสดงผ่าน Modal ได้ดังนี้

this.modalService.open({ info: 'รายละเอียด', title: 'หัวข้อ', infoMode: true }, ConfirmModalComponent);

สรุป

บทความนี้นำเสนอวิธีการสร้าง Modal Popup ใน Angular ด้วยการใช้ @ng-bootstrap/ng-bootstrap และ Bootstrap ซึ่งช่วยให้สร้าง Modal ถูกเรียกใช้งานได้อย่างมีประสิทธิภาพ