Angular ng-bootstrap을 활용한 Modal 사용법

angular에서 bootstrap 활용을 위한 ng-bootstrap 패키지를 활용하여 모달을 사용한다.

ModalService의 준비

import { Injectable } from '@angular/core';
// 모달을 사용하기 위한 import
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import { LoginModalComponent } from '../_components/login-modal/login-modal.component';
import { ApplyCheckModalComponent } from '../_components/apply-check-modal/apply-check-modal.component';
@Injectable()
export class ModalService {
  constructor(private modalService: NgbModal) {
  }
  openLoginModal(){
    const modalRef = this.modalService.open(LoginModalComponent);
    modalRef.componentInstance.name = 'World';
  }

  // open apply checking modal
  openApplyCheckModal(){
    const modalRef = this.modalService.open(ApplyCheckModalComponent);

    //필요한 데이터를 전달
    modalRef.componentInstance.name = 'World';
  }
}

원래는 NgbModal 모듈을 이용하여 바로 특정 모달 컴포넌트를 여는 방식이지만 여러 페이지에서 다양한 모달을 쉽게 열고 닫기 위해서 새로운 ModalService 서비스를 만들었다.

이 서비스에서 열고자 하는 다양한 modal component를 import하여 쉽게 열 수 있다.

또한 MgbModal을 통해 open 한 modal에 componentInstance를 통해 data를 전달할 수 있다.

import { Component, OnInit } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-login-modal',
  templateUrl: './login-modal.component.html',
  styleUrls: ['./login-modal.component.css']
})
export class LoginModalComponent implements OnInit {

  constructor(public activeModal: NgbActiveModal) {

  }

  ngOnInit() {
    // reset login status
    this.authenticationService.logout();

  }
  close(){
    this.activeModal.close();
  }
}

모달 내에서 모달을 닫기 위해 NgbActiveModal 모듈을 사용하였다.

<div>
  <div class="modal-header">
  </div>
  <div class="modal-body">
    <div class="" style="text-align:center;">
      <span style="font-weight:bold; margin-right:1rem;">아이디가 없으신가요?</span>
      <span><a [routerLink]="['/register/selectTypePage']" style="color:#65b8b4; font-weight:bold;" (click)="close()">회원가입</a></span>
    </div>
  </div>
  <div class="modal-footer">
  </div>
</div>

모달을 한번 감싸주고 그 안에서 modal-header, modal-body, modal-footer class 들을 사용하여 안을 꾸며준다.

Module.ts 에 등록

@NgModule({
  declarations: [
  ],
  imports: [
  ],
  providers: [
   ],
  bootstrap: [],
  entryComponents: [EmailCheckModalComponent]
})

app.module의 entryComponents에 등록하여 미리 컴포넌트를 로드시켜 놓는다.

참조하기

ModalService의 준비

Modal Component.ts

Modal Component.html

Module.ts 에 등록