An angular-material-multilevel-menu for Angular 6? - angular6

Question

I have tried to achieve a multilevel sidenav and I found this that meets my requirements:
angular-material-multilevel-menu
Demo - Note the accordion type
Unfortunately this is created for AngularJS (1.0?), which seems to not work in Angular 6.
My questions are:
Is there any other multilevel sidenav component for Angular 6? Have note found any similar on Google that works.
Is it possible to "upgrade" this Angular 1.0 menu to Angular 6? How?
Is there any simple instructions or courses to build your own multilevel side nav? There are many instructions for one-level, but I have found none multi-level.

Answer 1

I don't know if you are still looking for angular-material-multilevel-menu but I have found one made by ShankyTiwari.
Here is the link for GitHub and the link for the demo.
Very easy to use and to implement. For example, I implemented it in a sidebar because it does not exist with Angular material.
If not an alternative would be PrimeNG as #Dino said.

Answer 2

Angular Material 6.0 doesn't come with multilevel menu out of the box. You would have to create it on your own. It would be a combination of Nested Menu, and Side Nav.
And to answer your first question, I'd suggest you to take a look at PrimeNG's Panel Menu. It does exactly what you need and with some little effort, you'll also be able to change it's design into Material like. (I did it with some PrimeNG components, so I can confirm that it works.
Please take in consideration that PrimeNG 6.0.0 is currently in
Alpha-2 version.

Answer 3

I found a PART of a solution.
Here is a demo using "mat-expansion-panel"
There are still some issues that must be solved.
The shadow and offset of the Expansion Level
The shutdown instead of stay selected
Better way to do this?
Any suggestions?

Answer 4

I was looking to create multi-level menus with native angular material but still under development by ng material team. So, I'd like to suggest to use ng-material-multilevel-menu package for now by follow the below:
npm install --save ng-material-multilevel-menu or yarn add --save ng-material-multilevel-menu
Then import NgMaterialMultilevelMenuModule by
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
/* Import the module*/
import { NgMaterialMultilevelMenuModule } from 'ng-material-multilevel-menu';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgMaterialMultilevelMenuModule // Import here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Call <ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)"></ng-material-multilevel-menu> in your html.
Finally, declare appitems for your list items and config object
appitems = [
{
label: 'NPM',
icon: 'favorite',
link: 'https://www.npmjs.com/package/ng-material-multilevel-menu',
externalRedirect: true
},
{
label: 'Item 1 (with Font awesome icon)',
faIcon: 'fab fa-500px',
items: [
{
label: 'Item 1.1',
link: '/item-1-1',
faIcon: 'fab fa-accusoft'
},
{
label: 'Item 1.2',
faIcon: 'fab fa-accessible-icon',
items: [
{
label: 'Item 1.2.1',
link: '/item-1-2-1',
faIcon: 'fas fa-allergies'
},
{
label: 'Item 1.2.2',
faIcon: 'fas fa-ambulance',
items: [
{
label: 'Item 1.2.2.1',
link: 'item-1-2-2-1',
faIcon: 'fas fa-anchor',
onSelected: function() {
console.log('Item 1.2.2.1');
}
}
]
}
]
}
]
},
{
label: 'Item 2',
icon: 'alarm',
items: [
{
label: 'Item 2.1',
link: '/item-2-1',
icon: 'favorite'
},
{
label: 'Item 2.2',
link: '/item-2-2',
icon: 'favorite_border'
}
]
},
{
label: 'Item 3',
link: '/item-3',
icon: 'offline_pin',
onSelected: function() {
console.log('Item 3');
}
},
{
label: 'Item 4',
link: '/item-4',
icon: 'star_rate',
hidden: true
}
];
config = {
paddingAtStart: false,
classname: 'my-custom-class',
listBackgroundColor: '#fafafa',
fontColor: 'rgb(8, 54, 71)',
backgroundColor: '#fff',
selectedListFontColor: 'red',
interfaceWithRoute: true
};
Note: interfaceWithRoute will enable root item to be linkable if link property is available.