Hey NetHeads!!!
Of late, I have been working on mobile applications development and Ionic is one of my favourite framework. Though, Ionic provides in-built starters to create an app with tabs or side-menu, these features are tightly coupled when implemented with the in-built syntax.
In this post, we will implement the tabs and side-menu as independent loosely coupled modules.
We will build the structure from the ground up without using one of the starter templates to learn and understand how everything plays together!
Creating an App
We start with a blank template and enable lazy loading just so we can see what pages and components are needed to put together this kind of navigation.
We need to create quite a few pages which we will fill with live later on, so go ahead and create everything we need right at the beginning
ionic start dummycap blank
cd dummycap
ionic g page tab1
ionic g page tab2
ionic g page side-menu
ionic g page menu1
ionic g page menu2Building the Menu Navigation
Lets define the menu area and the content area inside a view. In our case we construct the menu items from an array of pages.
Copy the routes from app-routing.module and update the side-menu-routing module.
Include the pages in side-menu.page to be displayed on click of menu items
Building the Tabs Component
Lets define Tabs component to implement the tabs functionality and reuse it in other pages as tabs.
ionic g component tabs-compEmbed ion-tab-button — A built in UI component that specifies the layout of the icon and label and connect to a tab view within ion-col
Style the tab buttons to highlight the selected tab
Implement the logic to connect label with tab view
Now that we have decoupled the side-menu and tabs templates, lets integrate them.
We are going to embed the tabs-component within the Ionic Footer component to display the tabs in footer section.
To display tabs in a page, import TabsCompComponent within declarations of the page module and paste the above template outside ion-content in the page specific html files.
Sample html file with the ion-footer template
Run the below command to start the ionic app
ionic serveLets have a look at the app integrated with side-menu and tabs as two separate components.
Conclusion
It’s a bit tricky to get all the features working when combining different navigation patterns. But the important thing here is it is definitely possible, and the result is exactly what the behavior should look like!
Stay tuned for more productionised solutions!
Thank you for reading!!
