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

Setting up the Tab Bar Project & Routing

We start with a blank app and add all the needed pages for the tab bar plus a details page we can later push. Also, we need a new module file right next to our tab bar module where we can specify the routing information and keep it separate from the overall routing of the app.

Go ahead and run:

Are you ready to start learning?

Join the Ionic Academy

Now your global routing has been automatically updated to include the new pages, however we need a different setup as we need the app to open our basic tabs page first. If you have anything like a login before this page the path to the tabs would change so you could navigate to it afterwards, but for now it’s our starting page and therefore change your app/app-routing.module.ts to:

Alright, now the routing system is looking at the general app routing, then finds out it should look for more information inside the TabsPageModule.

We could now add the routing right there but to keep things clean and structured we initially created another module that comes into play now. This file holds the routing information for the tab bar and will be included in the TabsPageModule in a second.

The routing for the tabs looks like this inside your app/pages/tabs/tabs-routing.module.ts:

You need one parent component which in our case is the TabsPage. This page is like the tabs page of v3 where you include the tab bar UI and set the root pages.

With v4 this page also contains the UI but the different pages will be loaded into ion-router-outlet (which we will see inside the view soon).

Therefore, the routing needs to include the path for a tab, the outlet in which it will be displayed and the actually component that get’s rendered.

Finally we have a redirectTo which will be triggered when the app routing resolves the empty path and we set it to /tabs/(tab1:tab1) which basically means:

  • /tabs: Starting path, resolves to our parent component
  • (tab1:tab1): Syntax for (outlet:path) and in our case results in showing the tab1 inside the tab1 outlet which is the Tab1Page

All of this might seem more difficult than it actually is but I wanted to clarify those things upfront. It’s good to have the full understanding of what’s going on with your routing here!

To make use of all the routing we now need to include the information in the actual app/pages/tabs/tabs.module.ts like this:

Now the routing from the top will go down through all the information we provided, find the path for the initial routing and show the right page inside the right outlet.

Creating the Tab Bar View

Now we need to provide the actual view and the outlets we have used previously.

Think of an outlet like a container in which you present information, and the Angular router tells where which informations is presented. If you take a look at the app/app.component.html you will find this:

This means the router will replace the outlet with the right page to display. The same thing now happens for the tab bar, but because we have multiple pages (tabs) where information is presented we also give each outlet a name so we can later target it correctly.

With Beta 14 the interface was also reworked and now consists of some more elements around the tabs. This will help us a lot to achieve different behaviour of the tab bar, use other icons or buttons and a lot more.

The bar is now constructed of ion-tab-button that have a related ion-tab outside of their container. They are still connected with a name and can now hold either directly the information of the tab or like we initially wanted to have it, a router outlet.

The resulting view for a simple tab bar now looks like this inside your app/pages/tabs/tabs.page.html:

CAUTION: Previously with earlier beta versions it looked like this:

But we will now use the first version since Beta 14.

You should notice the href link for the tabs and also the outlet names which is exactly how we used it already inside our routing setup!

This means, if we use the outlet tab1 whatever information is presented inside the first tab, if we use outlet tab2 it will be in the second tab. Combined with the path, the right information will be displayed within the right place.

Because sometimes you need to receive click events from the tab bar I also already included the click for the second tab which you could now connect to the according app/pages/tabs/tabs.page.ts:

Now your tab bar is ready and you are even able to receive the click event for a tab!

Routing for Additional Pages

Of course your app is not ready at this point, most of the time your will go deeper into your content or display something above the bar.

If you want to display an overlay, check out the Quick Win on Passing Data to Ionic Modals, Pages & Popover!

For now we want to use our initially created DetailsPage and display it either fullscreen above everything or inside a tab. And we can achieve this by making smart use of the routing.

First of all, simply add the route to the app/app-routing.module.ts like this:

Now we could navigate from everywhere to /details and the page will be displayed with nothing else because we don’t have any parent set for it.

But if we want to show it within our tab bar UI we can include it inside the routing setup there so the page becomes a child of the tab bar navigation like this inside your app/pages/tabs/tabs-routing.module.ts:

Now the DetailsPage is also available under the path /tabs/(tab1:tab1/details) which looks strange but is simply the path for displaying the tab bar as a parent with the path tab1/details inside the tab1 outlet.

Are we good so far?

Whenever you add new pages and include them inside the Tab routing you also need to add the according page module to the module file because you might have already noticed that the tabs are not using lazy loading yet (which is in progress afaik).

Therefore, open your app/pages/tabs/tabs.module.ts and import the additional page module now:

Alright, let’s see how to navigate to that page now.

Presenting the Details Page

There are multiple ways to navigate around within Ionic 4, either from the view using the link or calling a function on the Angular router or even using a special Ionic NavController.

For now we will stick to the router as it’s the thing I expect to not change so fast again. Before we get there, make sure to add some buttons to your initial tab inside app/pages/tab1/tab1.page.html like this:

Also, if you navigate to a page you previously pushed a page and automatically got the back button using v3. That’s not the case anymore and you need to manually include this button on the pages that might be pushed inside your app, so open your app/pages/details/details.page.html and add it:

Now we can move to that page and we’ll have the back button at the top left.

So the final task is to use the routes we have previously defined, both for opening the page above and within the tabs interface. Therefore, add these two functions to your app/pages/tab1/tab1.page.ts:

As you can see we can simply call exactly the path on the router and the page will be displayed just as intended.

Conclusion

The tab bar interface is a bit more tricky to setup with Ionic 4, especially if you navigate to sub pages or reuse pages in different outlets. Always remember that you can use a page in multiple different paths and setups to achieve different behaviour like we’ve seen with our details page!

You can also find a video version of this Quick Win below.

Tweet
Reddit
+1
Share15
Email
15 Shares