Different tabs on DetailPage


I’m using the Tabs (Map and List) if you click on a listitem you will enter the DetailPage (with back button).

Now I want to display a different set of tabs on the DetailPage. How can I achieve this ?

–> app.component.ts
import { Component } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { StatusBar, Splashscreen } from ‘ionic-native’;
import { HomePage } from ‘…/pages/home/home’;

templateUrl: ‘app.html’
export class MyApp {
rootPage = HomePage;

constructor(platform: Platform) {

HomePage is the one containing the Map and List tabs.

Code to open the DetailPage
openPage(item: any) {
this.navCtrl.push(DetailPage, {
item: item

–> detail.ts
import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;

import { DetailTabsPage} from ‘…/detail-tabs/detail-tabs’;

selector: ‘page-detail’,
templateUrl: ‘detail.html’
export class DetailPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {}

ionViewDidLoad() {
console.log(‘ionViewDidLoad DetailPage’);


How can I display a different set of tabs on the DetailPage ?


You can display a different set of tabs on the DetailPage provided you have generated them as simple pages and declare them in the DetailPage .ts and .html files. Check the Tabs/Tab entry in the awesome Ionic 2 documentation in ionicframework.com

I can’t get it work for some reason. (Do you have a code sample ? )

What do you actually mean with simple page ?


ionic generate page Page1

ionic generate page Page2

to get two pages. Then use the example shown in the documentation for Tabs from http://ionicframework.com/docs/v2/api/components/tabs/Tabs/ in the Usage section and you’re done!

I did. I created a ListPage and a MapPage…
You can go to the DetailPage from the ListPage… this all works fine.

But I like to show a different set of tabs on the DetailPage. How can I do that, because now I just see Map and List

What about doing the same you did with HomePage containing ListPage and MapPage?
You have to generate new pages and set the DetailPage as the root with the two/three/n tabs you want to add.

Also, driftyco has a nice example of tabs you can check out: https://github.com/driftyco/ionic-conference-app

I see, it has to do with the rootPage.

Referring to the conference-app example:
How can we add different tabs for the SessionDetailPage ? (Specific tabs for SessionDetail)

Please let me know

Create the html (<ion-tabs, … etc) in sessiondetail.html, generate two additional pages (ionic create page …) and link them in sessiondetail.ts

I can’t get around this issue…

I tried:
this.navCtrl.push(Tabs2Page, sessionData); // SessionDetailTabs


this.navCtrl.push(SessionDetailPage, sessionData); // First page of tabs

Do you have skype? so we can do a small teamviewer session ?

Sorry, no Skype, broken camera.

But, if you put

in your SessionDetailsTabs.html and nothing else than that


export class SessionDetailTabs {

tab1Root = SessionDetailPage;
tab2Root = Tabs2Page;

constructor() { }

in your SessionDetailsTabs.ts

you’ll get a tabs container named SessionDetailsTabs with two tabs, namely SessionDetailPage and Tabs2Page.
If there’s still a problem you can upload your project in github so I can have a look or in codepen or elsewhere. Just let me know if this is what you’re looking for.

How can we use navCtrl.push() to open a page with different tabs ?

is it possible ?