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

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에 등록하여 미리 컴포넌트를 로드시켜 놓는다.

참조하기

여행산업의 모바일화가 우리에게 시사하는 점 Angular Production Build

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×