angular에서 bootstrap 활용을 위한 ng-bootstrap 패키지를 활용하여 모달을 사용한다.
ModalService의 준비
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| 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를 전달할 수 있다.
Modal Component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| 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 모듈을 사용하였다.
Modal Component.html
1 2 3 4 5 6 7 8 9 10 11 12
| <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 에 등록
1 2 3 4 5 6 7 8 9 10
| @NgModule({ declarations: [ ], imports: [ ], providers: [ ], bootstrap: [], entryComponents: [EmailCheckModalComponent] })
|
app.module의 entryComponents에 등록하여 미리 컴포넌트를 로드시켜 놓는다.
참조하기
Comments