Tabbed parent page that has a child view with another tabbed page (Angular/Ionic)

Ionic Framework Ionic Angular
1

versions:

  • Angular 14.2.12
  • Ionic/angular 6.5.2

So we have a root tabbed page that has three tabs. The first tab is a list of items, when you click one it has a sub/child page that has another tabbed page. From the documentation within Ionic angular routes, I have the child tabbed page as a child in the routes as specified. I’m finding if I put the route on its own and go to the route it displays the child tabbed page within the parent tabbed page which is not the desired effect we are trying to achieve. Is there an example out there that has this under Ionic/Angular?

Home Tabbed Page

  • List of items Page (Tab 1)
    —Child Tabbed Page
    ----Page 1 (Tab 1)
    ----Page 2 (Tab 2)
    ----Page 3 (Tab 3)
  • Another page (Tab 2)
  • Another page (Tab 3)
2

Let me know if this works for you.

i was able to get this to work by:

  1. generating a template tabs app
  2. add a child page with routing as /tab1/child
    • ionic g page pages/child
    • modify app.routing.module and tabs.routing.module
  3. add navigation from tab1 to tab1/child ie routerLink="child"
  4. in child.routing.module, set up tabs like in the outer tabs, with paths to subchild routes/components. be sure to include a default path.
  5. add ion-back-button to subchildren with defaultHref as tab1
3

my file structure is:

> app
    > pages
        > children
            > child1
            > child2
            > child3
        > tab1
        > child
        > tab2
        > tab3
    > tabs
1 Like