How to display a modal from <ion-tabs>?


I can’t find a way to make of the the buttons of the page open a modal instead of a page. I know tabs are not made for that, but I want to have the normal behavior for tabs for 4 buttons, and make the one on the center open a modal (like instagram). Not sure how to accomplish this, im seriously considering creating a FAB on top of center button.


hi franco, you have some code to share? A modal is a type of page. However implemented differently. Check the modal docs.


Hi Fred,

I have no problem displaying the modal, what I want to do is use a (click) property inside instead of having another tab.

Right now this is my workaround:

      <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
      <ion-tab [root]="tab2Root" tabTitle="Search" tabIcon="search"></ion-tab>
      <ion-tab [root]="tab3Root" tabIcon="add-circle"></ion-tab>
      <ion-tab [root]="tab4Root" tabTitle="Activity" tabIcon="flash"></ion-tab>
      <ion-tab [root]="tab5Root" tabTitle="Profile" tabIcon="person"></ion-tab>
<ion-fab center bottom>
  <button ion-fab color="danger" 
    <ion-icon name="add"></ion-icon>

It looks like this, but I don’t like having a button hiding another one…


Hey @franco_valencia do you find any alternative solution?


This seems like abuse of tabs. I would suggest trying segments.


I have mine just like yours except I have the center tab disabled without an icon or text, so it looks and works just fine.


If you really want to do something like that, why don’t you create modal from within your tabs main component? Attach (ionSelect)=“openModal()” to the tab you want to trigger the modal from and call openModal from within your main tabs.


Hi sveen, yes I did, I ended up doing this:

<ion-tabs #menu>
  <ion-tab [root]="tab1Root" tabTitle="{{ 'TABS.HOME' | translate }}" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="{{ 'TABS.SEARCH' | translate }}" tabIcon="search"></ion-tab>
  <ion-tab (ionSelect)="showCreateEvent()" tabIcon="add-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="{{ 'TABS.ACTIVITY' | translate }}" tabIcon="flash"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="{{ 'TABS.PROFILE' | translate }}" tabIcon="person"></ion-tab>


Ok :grin:

Can you show me your function which open your modal? Thanks



public showCreateEvent() {