모달 추가 방법 정리
모달 호출
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| ...
import { ModalController } from 'ionic-angular';
import { DrugboxModal } from '../drugbox/drugbox';
export class HomePage implements OnInit {
...
constructor(
...
public modalCtrl: ModalController
) { ... }
openDrugboxModal() {
const modal = this.modalCtrl.create(DrugboxModal);
modal.present();
}
}
|
1
2
3
4
5
6
7
| <div class="row row-center">
<div class="col col-center">
<button ion-button block color="danger" (click)=openDrugboxModal()><ion-icon name="archive"></ion-icon>
약물 등록
</button>
</div>
</div>
|
모달
1
2
3
4
5
6
7
8
9
10
11
12
13
| import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';
@Component({
templateUrl: 'drugbox.html',
})
export class DrugboxModal {
constructor(private viewCtrl: ViewController) {}
closeModal(): void {
this.viewCtrl.dismiss();
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <ion-header>
<ion-toolbar>
<ion-buttons start>
<button (click)="closeModal()" ion-button icon-only>
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>약품함</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>약품함입니다.</ion-content>
<ion-footer>
<ion-toolbar>
<small>약품을 등록해주세요!</small>
</ion-toolbar>
</ion-footer>
|
모달 등록
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| ...
import { DrugboxModal } from '../pages/drugbox/drugbox';
...
@NgModule({
declarations: [
...
DrugboxModal
],
....
entryComponents: [
...
DrugboxModal
],
....
|
Reference
https://github.com/angularjs-de/ionic2-pizza-service/blob/master/src/pages/order/order.component.ts
Comment and share
