How to Add A Tab Bar to Your Ionic 4 App [v4]

In this Quick Win we will add a tab bar to our Ionic 4 app starting from a blank template using the CLI to generate our pages and new Angular Router.

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.

ionic-4-tabs


ionic-academy-start

You must be a Member to view this Quick Win

Access all courses and lessons, track your progress, connect with Developers & build awesome Ionic Apps.


Comments on How to Add A Tab Bar to Your Ionic 4 App [v4]

  1. Jens Lück says:

    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!

    1. 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 😀

      1. Jens Lück says:

        Wow, that was a quick response. You are doing a great job with your tutorials. Thanks a lot!

  2. Fernando Herrera says:

    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

  3. hisham2015 says:

    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!

    1. That happens most of the time when your page module doesn’t import the Ionic module!

Leave a Reply

Your email address will not be published. Required fields are marked *