CODEWITHSUNDEEP
ionic-frameworkionic4
Phan Hero
Phan Hero

Reputation: 325

Modal box not showing in ionic 4

Modal box opening issue in ionic 4. Does not open at all and there is no error too. Need help.

I am writing a hybrid android app using ionic 4. In earlier versions of ionic it was easy to open modal box. I am facing modal box opening issue in ionic 4 now. ModalController is also imported and controller is also configured correctly.

controller

constructor(private nav: NavController, public http: Http, public modalCtrl: ModalController) {}

Modal opening code

async openModal() {
    const modal = await this.modalCtrl.create({
        component: GRPSearchModalPage
    });

    await modal.present();
}

Below is the complete code from GRPSearchModalPage

import { Component, OnInit } from '@angular/core';
import { NavParams, ModalController  } from '@ionic/angular';
@Component({
selector: 'app-grpsearch-modal-page',
templateUrl: './grpsearch-modal-page.component.html',
styleUrls: ['./grpsearch-modal-page.component.scss']
})

export class GRPSearchModalPageComponent implements OnInit 
{
  constructor( private navParams: NavParams, public modalCtrl:
  ModalController ) { }

ngOnInit() { }

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

Upvotes: 1

Views: 1207

Answers (1)

Felix O
Felix O

Reputation: 61

After importing the component in the app.module.ts make sure to add it to both the declarations and the entryComponents arrays.

app.module.ts

...

import { GRPSearchModalPageComponent } from 'YOUR_COMPONENT_DIRECTORY';

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

Upvotes: 1

Related Questions