Material Multi-Level Menu for Angular JS

ng-material-multilevel-menu

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.