Ionic Modal

Ionic에서 Modal은 사용자에게 추가 정보를 요청하거나 상호작용을 위한 팝업 창을 제공하는 데 사용됩니다. Modal을 사용하려면 다음과 같은 단계를 따릅니다. 아래 코드 예시는 Angular와 Ionic을 사용하는 환경에서 Modal을 사용하는 방법을 보여줍니다.

1. Modal 페이지 생성:
   먼저, Modal을 표시할 Angular 컴포넌트를 생성해야 합니다. 예를 들어, ModalPage라는 Modal 페이지를 생성해 보겠습니다.

   ionic generate page ModalPage

   위 명령어를 실행하면 ModalPage 컴포넌트와 관련 파일들이 생성됩니다.

2. ModalController import:
   Modal을 사용하기 위해 ModalController를 Angular 컴포넌트에 import해야 합니다.

   import { ModalController } from '@ionic/angular';

3. ModalController를 의존성으로 주입:
   ModalController를 Angular 컴포넌트의 생성자로 주입합니다.

   constructor(private modalController: ModalController) { }

4. Modal 열기:
   Modal을 열기 위해 create 메서드를 사용합니다.

   async presentModal() {
     const modal = await this.modalController.create({
       component: ModalPage,
       componentProps: {
         // 모달에 전달할 데이터를 여기에 설정
       }
     });
     return await modal.present();
   }

   위의 예시에서는 presentModal 메서드를 사용하여 Modal을 엽니다. component 속성에는 Modal로 표시할 컴포넌트를 지정하고, componentProps를 통해 Modal에 전달할 데이터를 설정할 수 있습니다.

5. Modal 페이지 닫기:
   Modal 페이지에서 작업을 마친 후에는 Modal을 닫아야 합니다.

   async closeModal() {
     await this.modalController.dismiss();
   }

   위의 예시에서는 closeModal 메서드를 사용하여 Modal을 닫습니다. dismiss 메서드를 호출하여 Modal을 닫을 수 있습니다.

이제 Modal을 열고 닫는 예시를 통해 전체적인 사용법을 살펴보겠습니다.

<!-- app.component.html -->
<ion-content>
  <ion-button (click)="presentModal()">Open Modal</ion-button>
</ion-content>

// app.component.ts
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from './modal/modal.page';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private modalController: ModalController) {}

  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: {
        // Modal에 전달할 데이터를 여기에 설정
      }
    });
    return await modal.present();
  }
}

// modal

/modal.page.ts
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.page.html',
  styleUrls: ['./modal.page.scss'],
})
export class ModalPage {
  constructor(private modalController: ModalController) {}

  async closeModal() {
    await this.modalController.dismiss();
  }
}

<!-- modal/modal.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>Modal Page</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-button (click)="closeModal()">Close Modal</ion-button>
</ion-content>

위의 예시는 Ionic Modal을 사용하는 기본적인 방법을 보여줍니다. Modal을 열고 닫을 때 사용되는 presentModal 및 closeModal 메서드를 호출하여 Modal을 제어할 수 있습니다. Modal 페이지는 Angular 컴포넌트로 구성되며 필요에 따라 내용을 추가할 수 있습니다.