JSON to side menu generation in angular5 to n levels

Question

I am trying to build a UI where the side menu of the page has to be generated dynamically please find the following json sample

{
  "side-menu 1": {
    "id": "",
    "display-name": "",
    "route-id": "",
    "description": "<reference to md file with contents, images, etc>",
    "sub-menu": [
      {
        "id": "",
        "display-name": "",
        "route-id": "",
        "description": "<reference to md file with contents, images, etc>",
        "sub-menu": [
          {
            "id": "",
            "display-name": "",
            "route-id": "",
            "description": "<reference to md file with contents, images, etc>"
          },

          {
            "id": "",
            "display-name": "",
            "route-id": "",
            "description": "<reference to md file with contents, images, etc>"
          }
        ]
      },
      {
        "id": "",
        "display-name": "",
        "route-id": "",
        "description": "<reference to md file with contents, images, etc>"
      }
    ]
  }

}

i have tried with "ng-material-multilevel-menu" and 2 days but it has some dependency issue please let me know which plugin or the approach i can use to achieve this

Please point some reference example sample in angular 6 to do get this done

this is a sample for you https://stackblitz.com/edit/angular-material-multi-level-menu-with-breadcrumb — Hien Nguyen, Jun 12 '19 at 05:53
Possible duplicate of [How to create dynamic side navigation menu&Submenu in ionic2/3](https://stackoverflow.com/questions/48257237/how-to-create-dynamic-side-navigation-menusubmenu-in-ionic2-3) — Harun Yilmaz, Jun 12 '19 at 06:14
i am able see this https://stackblitz.com/edit/angular-material-multi-level-menu-with-breadcrumb can u please point to side nested menu sample — DhanaLaxshmi, Jun 12 '19 at 06:19
@ Hien Nguyen same approach but please point me to nested side menu sample — DhanaLaxshmi, Jun 12 '19 at 06:26

score 0 · Answer 1 · answered May 04 '20 at 06:24

I don't know if you are still looking for the answer. If yes and for new viewers, then I have created a plugin for Angular which creates a Multilevel menu. Now you can convert this multilevel menu to Accordion as well, for example, Check this example.

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.

P.S. it works in IE11 as well.

Thanks

JSON to side menu generation in angular5 to n levels

1 Answers1