How to access ion tab routing outlet?

I’m working on a project which required ion model to be appear in ion-tabs Router Outlet but it appears on patent RouterOutlet

The function to open ion-model is in one of the child tab which is.

async presentPlayerModule(index){
    const modal = await this.modalController.create({
      component: PlayerComponent,
      swipeToClose: true,
      componentProps:{profile:this.profiles[index],image:this.images[index]},
      presentingElement:this.ionRouterOutlet.nativeEl
    });
    return await modal.present();
  }

Second one is ion-model I want it to appear such that tab bar should be present at the bottom.

I don’t think you can achieve this using ion-modal. As stated in the docs:

“A Modal is a dialog that appears on top of the app’s content, and must be dismissed by the app before interaction can resume.”

You should maybe use a regular component to display the second view and use animations and CSS to achieve the same UX

1 Like