Hybrid Angular + Ionic modal 아이오닉 생성 예시 CLI

ionic generate page modal

1. CLI page 생성

 

 

 

 

import { Component, OnInit, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.page.html',
  styleUrls: ['./modal.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule]
})
export class ModalPage implements OnInit {

  @Input() data?: string | undefined;


  constructor(private modalController: ModalController) { }

  ngOnInit() {}

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

2. 생성한 모달 페이지 컴포넌트

 

 

 

<div class="ion-page">
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="end">
        <ion-button (click)="closeModal()">X</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>

3. 생성한 모달 페이지 템플릿

 

 

 

 

 

 

 

 

{
    path: 'modal',
    loadComponent: () => import('./pages/modal/modal.page').then( m => m.ModalPage)
  },

4. 라우터 module