How to make ionic modal 'dismiss' method work

Question

I'm new to ionic and have been experimenting around with the framework. I've come across a problem with dismissing the modal.

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

export class SignupPage implements OnInit { constructor(private modalCtrl: ModalController) { }

ngOnInit() {}

  Close() { 
   this.modalCtrl.dismiss(); 
  } 
}

I was expecting this to close the modal. Instead of the modal closing, it just stays there with a button that is clickable but doesn't work. Is there anything that I'm missing or need to leave out? I need help...

Answer 1

1) I created the modal as a page 2) app.module.ts

I have added in the entryComponent the page of the modal and in turn the module to the      imports

import { ModalPage } from './pages/modal/modal.page';
import { ModalPageModule } from './pages/modal/modal.module';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [ModalPage],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
    ModalPageModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

3) app-routin.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
only the real pages should remain, for example home which is the home page

4) home.page.ts

function to open the modal

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

import { ModalPage } from './../pages/modal/modal.page';
@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {

    constructor(private modalController: ModalController) {}

    async abrirModal() {
        const modal = await this.modalController.create({
            component: ModalPage
        });

        modal.present();
    }

}

5) home.page.html

<ion-button color="primary" expand="full" (click)="abrirModal()">Abrir modal  </ion-button>

6) function to close o dismiss the modal in modal.page.ts

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

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

  constructor(private modalController: ModalController) { }

  ngOnInit() {
  }

  close() {
    this.modalController.dismiss();
  }

}

7) modal.page.html

<ion-button color="primary" (click)="close()">Close  </ion-button>