ionic 5 #Modal Controller 추가하여 사용하기

modal.page.ts 준비

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

@Component({
    selector: 'app-modal',
    templateUrl: './modal.page.html',
    styleUrls: ['./modal.page.scss']
})

export class ModalPage {
    @Input() something1: string;
    @Input() something2: string;

    constructor(private navParams: NavParams,
                private modalCtrl: ModalController) {
        console.log(navParams.get('something1'));
    }
    
    async dismiss() {
        this.modalCtrl.dismiss({
          'dismissed': true
        });
    }
}

 

modal.page.html 준비

<ion-content>
  <ion-title>Image modal</ion-title>
  <ion-item>
    {{something1}}
  </ion-item>
</ion-content>

<ion-footer>
  <ion-button expand="full" (click)="dismiss()">
    cancel
  </ion-button>
  <ion-button expand="full" (click)="download()">
    download
  </ion-button>
</ion-footer>

 

modal.module.ts 준비

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

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

import { ModalPage } from './modal.page';

const routes: Routes = [
  {
    path: '',
    component: ModalPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    ModalPage
  ],
  entryComponents: [
    ModalPage
  ]  
})
export class ModalPageModule {}

app.module.ts import에 ModalPageModule을 추가하기

import { ModalPageModule } from './common/modal/modal.module';

@NgModule({
  declarations: [AppComponent], 
  entryComponents: [],

  imports: [
    ...,
    ModalPageModule
  ],
  ...
})

 

modal 관련 기능을 수행할 modal.service.ts 에 ModalPage import

import { Injectable } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from './common/modal/modal.page';

@Injectable({
  providedIn: 'root'
})
export class ModalService {

  constructor(private modalCtrl: ModalController) { }

  async presentModal() {
    const modal = await this.modalCtrl.create({
      component: ModalPage
    });
    return await modal.present();
  }

  async dismiss() {
      this.modalCtrl.dismiss({
        'dismissed': true
      });
  }
}

 

 

sample.page.ts 에 modal 을 조회할 ModalService import

import { ModalService } from '../modal.service';

export class SamplePage implements OnInit {
  constructor(private modalService: ModalService) { }
  
  imageEnLarge(){
      this.modalService.presentModal();
  }
}