In this tutorial, we will learn more attractive topic accordion multi-level menu for Ionic Framework. I’ll show you accordion menu at the left side menu bar.
You can watch the video from youtube – https://www.youtube.com/watch?v=2no6hZO3tNI
Before start make sure you have all the setup in your local machine.
Prerequisite
Before start, verify that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.
Install Node.js and npm if they are not already on your machine. Find the full instruction from NodeJs Official website https://nodejs.org/en/ and Install Ionic and cordova from Ionic official website – https://ionicframework.com/docs/intro/installation/
On this lesson, I will go to each section step by step.
Step One,
Since we will use lazy module for this project so just clone this ionic starter app from this Github repository and cd into the project root directory and run npm install and then go into the browser at http://localhost:8100/ .
If everything is alright then your project structure will be look like this –
Awesome! Now let’s go in step 2.
Step Two,
Create a new menu provider for the side menu. For this, go to the terminal and type ionic g provider Menu. It should create a folder name providers in your project root directory and then go inside this folder you should find a menu/menu.ts file.
Just copy and paste the following code inside this menu.ts file,
https://gist.github.com/tithi021/3cf11532a30f2954b5831e2366ce2ea9#file-menu-ts
In this provider just add one method getSideMenus() that contains all the menu pages with It’s title and component name. Here title is a page name and component is a component of this specific page and subPages contains array of child pages for specific parent page.
So, we are complete our step1 and step2. In these steps you just create a Ionic 3 project and run starter app in browser and then create a provider menu for your side menu that return your menu contents.
Step Three,
In this step, we call previously created getSideMenus() method from app.component.ts file.
For this go into the project src/app/app.component.ts file and import menu provider in the top of the page and Inject this MenuProvider into the constructor section.
import { MenuProvider } from ‘../providers/menu/menu;
And replace pages: Array<{ title: string, component: any }>; to pages: any;
Add add a property just on top of the constructor, selectedMenu: any; and remove this.pages from constructor.
After that, create a method name as getSideMenuData() outside of constructor and into this function call menu provider getSideMenus() methods to get all the menu contents and assign this value in this.page variable.
getSideMenuData() {
this.pages = this.dataProvider.getSideMenus();
}
And call this getSideMenuData() method inside from this initializeApp() function.
If we combine all together then It’ll be look like this ,
https://gist.github.com/tithi021/3cf11532a30f2954b5831e2366ce2ea9#file-app-component-ts
Step 4,
This is our last step, in this step we finally create our multi-level or nested menu bar in left side menu.
For this you have to replace app.html with this following code,
https://gist.github.com/tithi021/3cf11532a30f2954b5831e2366ce2ea9#file-app-html
Here’s actually have done two nested *ngFor loops, one is for the parent page and another one is for the nested child page. Nested child page initially hidden whenever we click on its parent page then *ngIf match with its index number with selectedMenu and If Its match then this selected parent page expand all the child pages.
If you follow all the steps then It should look like this,
Summery: If you plan to start your next application with Ionic and need a beautiful accordion multilevel side menu then this tutorial will be help you a lot. And I try to show all the codes for beautiful accordion menu step by step.
Youtube video for this tutorial,
Thank you again for reading this, I’m excited to hear your comments and criticism.
If you have very short time for develop, then you can get its full source code from here – https://codecanyon.net/item/animated-ionic-3-accordion-menu-support-multi-level/21251855
Follow me at twitter @afrozatithi and @codevampires