[Ionic v4] Tabs Across All/Multiple Pages

[matthew-valenti]

Feature Request

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.0 (C:\Users\matth\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.4
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5

System:

   NodeJS : v8.9.4 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

Describe the Feature Request
Allow Ionic tabs to be used easily across one or more pages.

Describe Preferred Solution
Allow any page to easily show tabs (that have already been defined). E.g. Create a new page in the Ionic tabs project "account". The account page is a sibling (not a child) of the other pages. Currently, the account page will not display tabs. To display the same three tabs there's a lot of plumbing involved. e.g. Each page would have a corresponding tabs page and tab routes. Across multiple pages this becomes impractical. For a PWA, these urls are not friendly e.g. /tabs-account/(account:account). Even implementing a unique set of tabs per set of pages seems unwieldy since tab pages behave differently than single pages e.g. Tab pages lack "leave" page life cycle events (ionViewWillLeave, ionViewDidLeave, ionViewWillUnload).

Describe Alternatives
Add custom component(s) to footer that looks/behaves like tabs.

Additional Context
Material.io documentation states "Consistent. When used, the bottom navigation bar appears at the bottom of every screen." https://material.io/design/components/bottom-navigation.html#usage

[gregor-srdic]

I believe the right approach is to have one TABS component with a set of main pages for your app.
Then you can move deeper into the content on each of this TABs.
In your case "Account" should be one of the tabs in a single TABS component in your app.

[matthew-valenti]

@gregor-srdic - to clarify - are you saying tabs.router.module.ts would define all tabs across all pages?

In my case, the account page would never be a tab. Instead, the UI will have an account link in the header or sidemenu. But we still want the main tabs to show on the account page.

[matthew-valenti]

The new tab implementation in 4.0.0-beta.15 solves this issue. Static tabs can easily be added to a page i.e. buttons with href that look/feel like native tabs. I'm also able to move tabs into my own custom component and dynamically create tabs based on a json tab/page structure. Very nice! Closing.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.