How to create dynamic multilevel menu in Angular material

Question

I have a problem. I need to create a dynamic multilevel menu using angular material, the data source looks like this

[
    {
        "name": "Frontend",
        "children": [
            {
                "name": "HTML"
            },
            {
                "name": "Angular"
            },
            {
                "name": "CSS"
            }
        ]
    },
    {
        "name": "Backend",
        "children": [
            {
                "name": "Node"
            },
            {
                "name": "PHP",
                "children": [
                    {
                        "name": "Cake PHP"
                    }
                ]
            }
        ]
    }
]

The data structure can grow up to any depth, therefore is dynamic. How can adapt this to create a dynamic multilevel angular material menu?. The documentation just take static examples

Answer 1

I don't know if you are still looking for the answer. If yes, then I have created a plugin for Angular which creates a Multilevel menu.

Here is a NPM Link and Github Link , the documentation is very sweet and simple.

Just in case, if you wanna see more examples, I have a demo for you and this is the Github Repo of the demo.

If something doesn't work for you, and you still wanna use this plugin, then create an issue here I'll help you out.

PS it works in IE11 as well.

Thanks