Ionic 2 Modal Not Showing, even though it's working

Hey everyone, I’m currently using:

"ionic-angular": "2.0.0-rc.1",
"ionic-native": "2.2.3"

And when I use the Ionic 2 Modal, it actually creates the component and I can see it working, the only problem is that it’s not showing up. The only thing I’ll see is this slight animation and what looks to be a box-shadow or some kind of gradient moving up the screen, but no actual box with any of my content or anything like that. Does anyone have any idea what’s going on?

Here is my component that brings up the modal:

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { Search } from '../../pages/search/search';

/*
  Generated class for the SearchIcon component.

  See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
  for more info on Angular 2 Components.
*/
@Component({
  selector: 'search-button',
  templateUrl: 'search-button.html'
})
export class SearchButton {

  constructor(public modalCtrl: ModalController) {
  }

  openSearch() {
    let modal = this.modalCtrl.create(Search);
    modal.present();
  }

}

Here is my “Search” page code:

  <ion-navbar>
    <ion-title>Search</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
 Search is good
</ion-content>

This is a strange bug. Has anyone else run into this?

Thanks!

1 Like

I have same problem.

I think this code is wrong. You can try:
import { Search } from ‘…/search/search’;

Hmm, I’m not sure if it’s that, because the component is importing just fine without any errors. It’s just a weird effect of the Modal. I’m actually able to navigate to it, outside of the Modal context.

if you have any config in appmodule for modals, remove it and try again. i had to comment out modalEnter: ‘modal-slide-in’ and modalLeave: ‘modal-slide-out’ to get mine to work

@NgModule({
declarations: [
AppComponent
],
imports: [
IonicModule.forRoot(AppComponent, {
iconMode: ‘ios’,
mode: ‘md’,
// modalEnter: ‘modal-slide-in’,
// modalLeave: ‘modal-slide-out’,
tabsHideOnSubPages: true,
tabsPlacement: ‘top’,
// pageTransition: ‘ios’
}),
MomentModule,
SDKModule.forRoot(),
],
bootstrap: [IonicApp],
entryComponents: [
AppComponent
],
providers: [DataServices]
})