Problems jumping from root tab to root tab

Question

Which is the best way for doing this?

I have three options, but I do not like any of them.

Option 1:

• TabsPage 2: Create “A, B, C” like a “Footer”
• Disable subpage Tabs in config opcion (take out Tabs “1, 2, 3”)
• GO: Use “NavBar Push(Screen2)”.
• BACK: “NavBar pop()”

Problems:

1. Create tab “A, B, C” with “Footer” instead of “ion-tab”

Option 2:

• Use “Modal Form” for “screen2”.
• TabsPage 2:
  • Create “A, B, C” like a “Footer”
  • Create manually “back button”
• GO: View Modal
• BACK: Dismiss modal

Problems:

1. Create tab “A, B, C” with “Footer” instead of “ion-tab”
2. back button is not automatically generated.

Option 3:

• Create two “TabsPage” with “ion-tabs” for “1, 2, 3” and for “A, B, C”.
• GO: this.appCtrl.getRootNav().setRoot(TabsPage2)
• BACK: this.appCtrl.getRootNav().setRoot(TabsPage1)

Problems:

1. “TabsPage 1” filter options and position is lost when “BACK”.

Answer 1

This link drived me to this github repo which has an example with a solutions based on "ion-tab" that works for both "Modals" and "Push" (see the example on a video).

The problem is solved just by adding [tabsHideOnSubPages]="true" on TabsPage1, like this:

<ion-tabs>
    <ion-tab [tabsHideOnSubPages]="true" [root]="homePage" tabIcon="home"></ion-tab>
    <ion-tab [root]="chatPage" tabIcon="chatbubbles"></ion-tab>
    <ion-tab [root]="profilePage" tabIcon="person"></ion-tab>
</ion-tabs>

I have used "push" just because like that the "back" button is generated automatically.

Great! J. Pablo.