In this Quick Win we will add a tab bar to our Ionic app starting from a blank template using the CLI to generate our pages and new Angular Router.
05/01/2020: Updated for Ionic 5!
The new Angular routing in the background makes this task a bit more tricky and especially going from tabs to other pages can lead to confusion in terms of the routing. We will create our routing for different cases including passing data to a details page and showing or hiding the tab bar on specific pages.
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
Current member? LOGIN
Hallo Simon,
very nice tutorial. Helped me a lot to dig deeper into the routing matter… But I found three little errors.
1. /tab: Starting path, resolves to …. -> . /tabs: Starting path, resolves to ….
2. If you take a look at the app/app.component.ts … -> If you take a look at the app/app.component.html
3. ->
Also the ion-back-button remains invisible (probably an issue with ionic beta 16), but adding defaultHref=”” helped to make it visible ->
Would be great if you could fix it. Thanks in advance!
Hey Jens, thanks a lot for all of this! The world needs more people like you that don’t just complain but also help to make things better.
I’ve fixed all of the issues and yes, some of them just happened lately..I’m sure there will be again minor changes before the final version is out 😀
Wow, that was a quick response. You are doing a great job with your tutorials. Thanks a lot!
Hello❤
https://google.com/#btnI=rutigunu&q=ichatster.com&ab=wrsftluwha
My id @924883
I’m facing some strange behaviour, everything works (with a little help of the ionic/docs), but this is a good tutorial, but my issue is simple, I don’t have the animation when I move to the detail page, within and without the tabs… the back button have animation… pretty strange
Hi there,
I’m facing a strange problem I got an error say that ion-tab is not an angular element or to be more specific I got this error ( ion-tab is not a known element )
I searched a lot but I didn’t find solution for this!
That happens most of the time when your page module doesn’t import the Ionic module!