ionic-modal tutorial 예제

1. modal page 생성

2. 상위 module에 import 'modal page'

3. modal page 코드 작성

 

Ionic5 Angular 기반으로 작성하였습니다.

---

1. modal page 생성

// cli로 하는 경우, 명령어를 입력해 생성합니다.
ionic generate page modal-exam

generate page를 사용하면, 4개의 파일이 생성됩니다.

module.ts, html, scss, ts

// modal-exam.module.ts

const routes: Routes = [
  {
    path: 'modal-exam',
    component: ModalExamPage
  }
];

@NgModule({
  imports: [
	...
  ],
  declarations: [ModalExamPage],
  exports: [ModalExamPage]
})
export class ModalExamPageModule {}

[route 사용하는 경우]

반드시 path에 위치를 기입해주세요.

---

2. 상위.module에 NgModule에 등록하기

// home.module.ts

... 
@NgModule({
  imports: [
	...
    ModalExamPage
  ],
})
export class HomeModule { }

---

3. modal page 코드 작성

<!-- modal-exam.html -->

<div class="ion-page">
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="end">
        <ion-button (click)="closeModal()">닫기</ion-button>
      </ion-buttons>
      <ion-title>{{data}}</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <ion-item>
      내용을 추가하세요
    </ion-item> 
  </ion-content>
</div>

// modal-exam.page.ts

import { Component, Input, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-modal-exam',
  templateUrl: './modal-exam.page.html',
  styleUrls: ['./modal-exam.page.scss'],
})
export class EditInfoPage implements OnInit {
  
  @Input() data: string;

  constructor(public modalController: ModalController) { }

  ngOnInit() {}

  closeModal() {
    this.modalController.dismiss({
      'dismissed': true
    });
  }

}

<!-- home.component.html -->
<div class="ion-page">
  <ion-header [translucent]="true">
    <ion-toolbar>
    <ion-title>
      모달 예제
    </ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding" [fullscreen]="true">
    <ion-item >
      <ion-label>수정하기</ion-label>
      <ion-button color="success" slot="end" (click)="editLocation()">
        <ion-icon name="arrow-forward"></ion-icon>
      </ion-button>
    </ion-item>
  </ion-content>
</div>

// home.component.ts

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-template',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class TemplateComponent implements OnInit {

constructor(public modalController: ModalController) { }

  ngOnInit() {}
  
  async presentModal() {
    const modal = await this.modalController.create({
      component: EditInfoPage,
      componentProps: {
        'data': 'modal-example'
      }
    });

    modal.onDidDismiss().then((res:any) => {
      if (res !== null) {
        console.log('Modal Sent Data : '+ res.data);
      }
    });

    return await modal.present();
  }

}