ng-material-multilevel-menu is to offer a multilevel menu of slim and Skinny materials for Angular projects. It can fit into any type of project without fuss. In a few lines, you’ll have a multi-level menu ready for animation that just works.
ng material multilevel menu example, angularjs multi level menu, ng material multilevel menu is not a known element, multi level dropdown angular material
Features
- Material icons are supported.
- FontAwesome icons supported.
- Use the pictures as icons in the list.
- Work smoothly with angular routing, if provided.
- RTL support
How to make use of it:
Installation
NPM npm install --save ng-material-multilevel-menu YARN yarn add --save ng-material-multilevel-menu
1. You need to import the NgMaterialMultilevelMenuModule into the module of your app where you want to use it.
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 { }
2. In your HTML: Use <ng-material-multilevel-menu> wherever you want in your project.
<ng-material-multilevel-menu
[configuration]='config'
[items]='appitems'
(selectedItem)="selectedItem($event)"
(menuIsReady)="menuIsReady($event)"
(selectedLabel)="selectedLabel($event)">
</ng-material-multilevel-menu>3. Make sure that the matrix structure should look like the one shown below:
appitems = [
{
label: 'NPM',
imageIcon: '/assets/batman.jpg',
link: 'https://www.npmjs.com/package/ng-material-multilevel-menu',
externalRedirect: true,
hrefTargetType: '_blank' // _blank|_self|_parent|_top|framename
},
{
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',
disabled: true,
items: [
{
label: 'Item 1.2.1',
link: '/item-1-2-1',
faIcon: 'fa-allergies' // Font awesome default prefix is fas
},
{
label: 'Item 1.2.2',
faIcon: 'fas fa-ambulance',
items: [
{
label: 'Item 1.2.2.1',
faIcon: 'fas fa-anchor', // Still you can specify if you want to
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_border',
activeIcon: 'favorite',
disabled: true,
},
{
label: 'Item 2.2',
link: '/item-2-2',
icon: 'favorite_border',
activeIcon: 'favorite',
navigationExtras: {
queryParams: { order: 'popular', filter: 'new' },
}
}
]
},
{
label: 'Item 3',
icon: 'offline_pin',
onSelected: function() {
console.log('Item 3');
}
},
{
label: 'Item 4',
link: '/item-4',
icon: 'star_rate',
hidden: true
}
];
Material Multi-Level Menu, ng-material-multilevel-menu Plugin/Github, angular multilevel menu example
See Demo And Download
Official Website(ShankyTiwari): Click Here
This superior jQuery/javascript plugin is developed by ShankyTiwari. For extra Advanced Usages, please go to the official website.