{"id":12837,"date":"2022-10-29T12:06:06","date_gmt":"2022-10-29T12:06:06","guid":{"rendered":"https:\/\/ui-lib.com\/blog\/?p=12837"},"modified":"2024-04-29T18:56:19","modified_gmt":"2024-04-29T18:56:19","slug":"angular-multi-level-menu","status":"publish","type":"post","link":"https:\/\/ui-lib.com\/blog\/angular-multi-level-menu\/","title":{"rendered":"How to Create a Angular multi level Menu"},"content":{"rendered":"\n

Multi level or unlimited level menu are commonly used in admin panel. MatX Angular<\/a> dashboard has unlimited level menu. MatX is a Free Angular material design admin dashboard template. This side navigation of MatX has unlimited level menu. Let’s take a look at the data structure of this menu.<\/p>\n\n\n\n

File on github: navigation.service.ts<\/a><\/p>\n\n\n

\niconMenu: IMenuItem[] = [{\n      name: 'WIZARD',\n      state: 'forms\/wizard',\n      type: 'link',\n      icon: 'grain',\n    },\n    {\n      name: 'Multi Level',\n      type: 'dropDown',\n      tooltip: 'Multi Level',\n      icon: 'format_align_center',\n      sub: [\n        { name: 'Level Two', state: 'fake-4' },\n        {\n          name: 'Level Two',\n          type: 'dropDown',\n          sub: [\n            { name: 'Level Three', state: 'fake-2' },\n            { \n              name: 'Level Three', \n              type: 'dropDown',\n              sub: [\n                { name: 'Level Four', state: 'fake-3' },\n                { \n                  name: 'Level Four', \n                  type: 'dropDown',\n                  sub: [\n                    { name: 'Level Five', state: 'fake-3' },\n                    { name: 'Level Five', type: 'link', state: 'fake-3' }\n                  ]\n                }\n              ]\n            }\n          ]\n        },\n        { name: 'Level Two', state: 'fake-5' }\n      ]\n    }]\n<\/pre><\/div>\n\n\n

Dropdown menu has type: 'dropDown'<\/code> and a sub: []<\/code> property, sub contains the child items.
<\/p>\n\n\n\n
The Logic<\/h2>\n\n\n\n
Inside the HTML template we have the logic. Menu items array is coming from items<\/code> props of the component. <\/p>\n\n\n\n
File on github: sidenav.component.ts<\/a><\/p>\n\n\n\n
@Input('items') public menuItems: any[] = [];<\/code><\/p>\n\n\n\n
sidenav.template.html<\/a><\/p>\n\n\n
\n<div class="sidenav-hold" #sidenav>\n\n  <ng-container *ngTemplateOutlet="menuTemplate; context: {menuItems: menuItems}"><\/ng-container>\n\n<\/div>\n\n<ng-template #menuTemplate let-menuItems="menuItems">\n  <ul appDropdown class="sidenav">\n    <li *ngFor="let item of menuItems" appDropdownLink routerLinkActive="open">\n      \n\n      <!-- Item -->\n      <!-- MENU ITEM -->\n      <div *ngIf="!item.disabled && item.type !== 'separator' && item.type !== 'icon'" class="lvl1">\n        <a routerLink="\/{{item.state}}" appDropdownToggle matRipple\n          *ngIf="item.type !== 'extLink' && item.type !== 'dropDown'" routerLinkActive="open">\n          <mat-icon *ngIf="item.icon" class="sidenav-mat-icon">{{item.icon}}<\/mat-icon>\n          <mat-icon *ngIf="item.svgIcon" [svgIcon]="item.svgIcon" class="svgIcon"><\/mat-icon>\n          <span class="item-name lvl1">{{item.name | translate}}<\/span>\n          <span fxFlex><\/span>\n          <span class="menuitem-badge mat-bg-{{ badge.color }}" [ngStyle]="{background: badge.color}"\n            *ngFor="let badge of item.badges">{{ badge.value }}<\/span>\n        <\/a>\n\n        <!-- DropDown -->\n        <a *ngIf="item.type === 'dropDown'" appDropdownToggle matRipple>\n          <mat-icon *ngIf="item.icon" class="sidenav-mat-icon">{{item.icon}}<\/mat-icon>\n          <mat-icon *ngIf="item.svgIcon" [svgIcon]="item.svgIcon" class="svgIcon"><\/mat-icon>\n          <span class="item-name lvl1">{{item.name | translate}}<\/span>\n          <span fxFlex><\/span>\n          <span class="menuitem-badge mat-bg-{{ badge.color }}" [ngStyle]="{background: badge.color}"\n            *ngFor="let badge of item.badges">{{ badge.value }}<\/span>\n          <mat-icon class="menu-caret">keyboard_arrow_right<\/mat-icon>\n        <\/a>\n\n        <div *ngIf="item.type === 'dropDown'">\n          <ng-container *ngTemplateOutlet="menuTemplate; context: {menuItems: item.sub}"><\/ng-container>\n        <\/div>\n\n      <\/div>\n    <\/li>\n  <\/ul>\n<\/ng-template>\n<\/pre><\/div>\n\n\n
We used ng-template<\/code> to render the dropdown menu. We called it #menuTemplate<\/code>. We passed the array of menu items to the ng-template<\/code>.<\/p>\n\n\n\n

We iterate through the array of menu items and render each item. Then we used *ngIf<\/code> to conditionally render different types of menu items such as link<\/code>, dropdown<\/code>, extLink<\/code>.
If the item type is dropDown<\/code> we render the dropdown toggle item first. Then the child menu items directly underneath of it.<\/p>\n\n\n\n

And here is the tricky part. We called ng-template #menuTemplate inside itself. Means it’s calling or referencing itself recursively. And we passed the array of submenu or child items. It renders the child items inside itself. <\/p>\n\n\n\n
And again if it finds another dropDown during rending the child items it will again call the ng-template inside child items and render grandchild items.This process will go on as long as it finds the child items.<\/p>\n\n\n\n

Expansion panel<\/strong><\/strong><\/h2>\n\n\n\n
This is how the rendering works. Now let’s talk about how expansion panel works. We created few directives. appDropdown<\/code> directive which is attached to the ul<\/code> tag of menu.
appDropdownLink<\/code> which is attached to the li<\/code> tag of an item
and the appDropdownToggle<\/code> toggle which is attached to the a<\/code> tag of an item.
These three directive does one job. Add and remove open class to the li tag if you click on it.<\/p>\n\n\n\n

CSS<\/strong><\/h2>\n\n\n\n
We need a little bit of css to make the drop down Menu actually open and close on click. By default the ul<\/code> tag of child menu is set to max-height: 0<\/code>, when the open class added by clicking the its parent item we set max-height<\/code> to a big number like 1000px<\/code>. We assumed the height of the child menu will be always less than 1000px<\/code>.You can always increase this number. Here is the CSS code example<\/a><\/p>\n\n\n\n
\n
MatX Pro – Angular Admin Dashboard Template<\/a><\/blockquote>