How to load a modal in Ionic 4

manpreet Best Answer 2 years ago

I have an index that i have a add button when press load a modal.

index.html

  
    Foods
    
      
        
      
    
  

this is the index page ts

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { AddPage } from '../add/add.page';

@Component({
  selector: 'app-index',
  templateUrl: 'index.page.html',
  styleUrls: ['index.page.scss']
})
export class IndexPage {

  constructor(private modalController: ModalController) { }

  async showModal() {
    const modal = await this.modalController.create({
      component: AddPage,
    });
    await modal.present();
  }
}

so when the user click showModal load the modal.

Now this is my add modal module.

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 { AddPage } from './add.page';

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

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

This is my add page td.

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

@Component({
  selector: 'app-add',
  templateUrl: './add.page.html',
  styleUrls: ['./add.page.scss'],
})
export class AddPage implements OnInit {

  constructor() {

  }

The problem when i go to the index page the Modal is already loaded. I can't even see the Index page anymore. Its like the Modal is being routed to the Index page.

manpreet 2 years ago

In your modal html, add the following:

Foods

  color="primary" (click)="dismissModal()"> Dismiss
  
  
 

Then in the ts, add the following:

dismissModal() {
 this.modalController.dismiss(null);
}

This will let you dismiss the open modal.