CODEWITHSUNDEEP
ionic2ionic3
Ranjith Varatharajan
Ranjith Varatharajan

Reputation: 1692

Ionic 3 Tabs on Modal

I have implemented tabs on a modal.

Here is the code:

Pagewithmodal.ts

getFoodInfo(food) {
    let foodModal = this.modalCtrl.create('TabspagePage', { Model: food, Api: this.api, Title: 'Food Infopedia' });
    foodModal.onDidDismiss(option => {
      console.log(option);
    });
    foodModal.present();
  }

TabspagePage.html

<ion-tabs>
  <ion-tab tabIcon="heart" [root]="tabNutri" tabTitle="Nutritional" [rootParams]="model"></ion-tab>
  <ion-tab tabIcon="star" [root]="tabIngre" tabTitle="Ingredients" [rootParams]="model"></ion-tab>
</ion-tabs>

TabspagePage.ts

this.tabIngre = 'IngreinfoPage';
    this.tabNutri = 'FoodinfoPage';
    this.model = { 'Api': navParams.data.Api, 'Model': navParams.data.Model };

IngreinfoPage.html

<ion-header>
  <ion-navbar color="header">
    <ion-title>Food Infopedia</ion-title>
    <ion-buttons end>
      <button ion-button color="light" clear icon-only (click)="dismiss()">
        <ion-icon name='close' is-active="true"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

IngreinfoPage.ts

dismiss() {
    this.viewCtrl.dismiss();
  }

When I click the close button, dismiss() function is called, and i'm getting an error Runtime Error Uncaught (in promise): navigation stack needs at least one root page

Upvotes: 1

Views: 1943

Answers (1)

Suraj Rao
Suraj Rao

Reputation: 29635

<ion-tab tabIcon="star" [root]="tabIngre" tabTitle="Ingredients" [rootParams]="model"></ion-tab>

This will create a new nav stack with root page as your modal page: IngreinfoPage.

And when you dismiss from IngreinfoPage,it will remove only IngreinfoPage and the stack will have no root page. If you want to dismiss the tabs modal, you will have to dismiss from the TabspagePage i.e. create a dismiss function in TabsPagePage and maybe use Events API to call the function on close.

Upvotes: 2

Related Questions