Creating a tab bar with Ionic is pretty easy, adding a side menu is a bit more tricky in terms of the structure but still quite easy. But when it comes to combining both UI patterns, many people encounter a lot of trouble setting up their routing logic and connecting the pages correctly.
05/01/2020: Updated for Ionic 5!
In this Quick Win we will integrate a tab bar into one page of our side menu (which means you could also create multiple tab bars for other side menu pages!) and take a special look at how to setup the routing in the most flexible way. It’s not going to be a regular Quick Win as we got a lot of code involved but it’s still the fastest way to get to the desired outcome!
Therefore, we will assume we need a login before our users get to the actual menu page which is a common scenario these days.
We will build the structure from ground up without using one of the starter templates to learn and understand how everything plays together!
The full quick win with snippets is only available to Ionic Academy members.
Join now for
- Unlimited access to all quick wins
- Library of 40+ step-by-step video courses
- Support for Ionic questions via Slack & private community
Great work
Thank you,
Here I’m better understanding about Routing in ionic4.
Doesn’t work to m, always get:
tab with id: “undefined” does not exist
Lots of problems here, please show your app.component.html file
For example i don’t want login page. Directly go to home page with tab1 and tab2. Have i to redirect to tab1 at home? Can’t i show home content? As i understood, tab container page is useless (no content) like first page in this example.
I probably did something stupid and the tabs clicks don’t work anymore. What could be the problem?