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

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.

Hello. Your questions 1 and 3 don't fit in stack overflow, since they are about finding tools and tutorials. See the [topic list](https://stackoverflow.com/help/on-topic). For the second, sure it is, but you'll probably need to perform many major changes in the [source code](https://github.com/jmouriz/angular-material-multilevel-menu). Too broad to be covered by a single answer here... — Aritz, Jun 04 '18 at 06:44
@Xtreme Biker I will post an example that I found by accident. Hope you can give some clues on my remaining issues. — sibert, Jun 04 '18 at 14:33

score 8 · Accepted Answer · answered Jun 14 '18 at 18:31

8

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.

answered Jun 14 '18 at 18:31

PierBJX

2,093
5
19
50

Still looking. I have managed to get the same look as ShankyTiwari by standard modules. But still limited success setting backgrund colors. Can you control the background / selected colors in his module? – sibert Jun 15 '18 at 05:11
Yes you can if you set up the configuration. Have a look at the API section on GitHub https://github.com/ShankyTiwari/ng-material-multilevel-menu#api – PierBJX Jun 15 '18 at 11:18
Thanks a lot @PierBJX, This link is very useful and exactly meet my requirement.. – Aniket Avhad Jan 25 '19 at 10:36
This is not working on IE 11: https://github.com/ShankyTiwari/ng-material-multilevel-menu/issues/87 – Sampath Dec 04 '19 at 11:15
1

Hi @Sampath, IDK if you are using something else, but just in case if you again need to create a Multilevel list or people who are reading this question for the first time, then you can use it in IE11 as well The issue [#87](https://github.com/ShankyTiwari/ng-material-multilevel-menu/issues/87) is fixed now. Thanks – Shanky May 04 '20 at 05:50
Hi, @Shanky Ok sure! Yes, I do not use it. But I hope someone will get the benefit of that. Thanks. – Sampath May 04 '20 at 18:07

score 3 · Answer 2 · answered Jun 04 '18 at 10:26

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.

As I interpret this, is Nested Menus popping up at right, but there is a property "direction: Direction". Do you have any examples of expanding second level below the first level? And I cannot find any examples of PrimNG than "SLIDEmenu" which is nice but not my first goal. — sibert, Jun 04 '18 at 14:31

score 3 · Answer 3 · answered Jun 04 '18 at 14:41

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?

answered Jun 04 '18 at 14:41

sibert

1,968
8
33
57

could you add the source for this – Bhabani pattanayak Sep 23 '19 at 21:57
No. I have abandon Angular and have no memory of how I did. Now I use Golang http://94.237.25.207:8080 – sibert Sep 24 '19 at 06:29

score 3 · Answer 4 · edited Jun 20 '20 at 09:12

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.

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

4 Answers4