[Angular Snippet] Bootstrap Modal Popup

Trong hướng dẫn này, chúng tôi sẽ cài đặt Ng Bootstrap trong dự án Angular và tìm hiểu Cách triển khai các Bootstrap Modal trong ứng dụng Angular.

Modal là một hộp thoại/cửa sổ bật lên được sử dụng để hiển thị nội dung lên trên các nội dung khác. Nó nổi ở giữa màn hình và có thể đóng lại sau các hành động bởi người dùng

Bước 1.  Cài đặt ng-bootstrap

Dùng lệnh command

$ ng add @ng-bootstrap/ng-bootstrap

Nó sẽ tự động cài đặt vào angular.json

Bước 2: Import Bootstrap Module

Trong app.module.ts, import NgbModule ( đây là Boostrap Module) và FormsModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MymodalComponent } from './mymodal/mymodal.component';

@NgModule({
  declarations: [
    AppComponent,
    MymodalComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  entryComponents:[
    MymodalComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Bước 3: Sử dụng Boostrap Modal

3.1. Tạo Button để mở Modal

Trong app.template.html thêm một button

<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

3.2. Tạo một template là nội dung của Modal

Khởi tạo một component mymodal, có thể tạo nhanh với lệnh angular cli

ng g c mymodal

Trong mymodal.template.html tạo template

  <ng-template #mymodal let-modal>
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">Bootstrap Modal</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    <div class="modal-body">
      <p> {{my_modal_content}}</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>
    </div>
   </ng-template>

Trong mymodal.component.ts tạo import NgbActiveModal và sử dụng @input để truyền dữ liệu vào

import { Component, OnInit, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-mymodal',
  templateUrl: './mymodal.component.html',
  styleUrls: ['./mymodal.component.css']
})
export class MymodalComponent implements OnInit {

  @Input() my_modal_title;
  @Input() my_modal_content;

  constructor(public activeModal: NgbActiveModal) {}

  ngOnInit() {
  }

}

3.3. Thêm function Open Modal vào trong component app.component.ts

import NgbModal, ModalDismissReasons, NgbModalOptions

và thêm function Open để xử lý button mở modal

import { Component } from '@angular/core';
import {NgbModal, ModalDismissReasons, NgbModalOptions} from '@ng-bootstrap/ng-bootstrap';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'ng-bootstrap-modal-demo';
 closeResult: string;
 modalOptions:NgbModalOptions;
 constructor(
   private modalService: NgbModal
 ){
   this.modalOptions = {
     backdrop:'static',
     backdropClass:'customBackdrop'
   }
 }
 
 open() {
 	const modalRef = this.modalService.open(MymodalComponent);
    modalRef.componentInstance.my_modal_title = 'I your title';
    modalRef.componentInstance.my_modal_content = 'I am your content';
   	modalRef.result.then((result) => {
     this.closeResult = `Closed with: ${result}`;
   }, (reason) => {
     this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
   });
 }
 private getDismissReason(reason: any): string {
   if (reason === ModalDismissReasons.ESC) {
     return 'by pressing ESC';
   } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
     return 'by clicking on a backdrop';
   } else {
     return  `with: ${reason}`;
   }
 }
}

Tóm lại

• Để tạo một modal với angular và ng-bootstrap
• Cần phải cài đặt ng-bootstrap
• Import các module Modal từ ng-bootstrap
• Tạo một Button để mở Modal
• Trong function mở modal ta sẽ truyển biến số vào trong Modal Component mình tạo ( cụ thể vd này là mymodal)
• Từ Modal Component dùng @input để nhận dữ liệu từ App Component
• Để App Component nhận lại các kết quả từ Modal Component ta dùng modalRef.result

Cách Khác

Sử dụng model và rxjs, như trong ví dụ này

Link tham khảo

https://ng-bootstrap.github.io/#/components/modal/api