Different tabs on DetailPage

Ionic Framework ionic-v3
1

Hello,

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’;

@Component({
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’;

@Component({
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 ?

Thanks

2

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

3

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

What do you actually mean with simple page ?

4

Use

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!

5

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

6

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.

7

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

8

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

9

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

10

I can’t get around this issue…

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

or

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

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

11

Sorry, no Skype, broken camera.

But, if you put

in your SessionDetailsTabs.html and nothing else than that

and

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.

12

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

is it possible ?