Dynamic Menu with Sub menu in angular 2

Question

I have some JSON in the below format. I need to convert it into a menu with a sub menu when sub-menu_location is not equal to null, as below

{
  "data": [
    {
      "menu_name": "Primary Operations",
      "enabled": true,
      "sub-menu_location": null
    },
    {
      "menu_name": "Curated Games",
      "enabled": false,
      "sub-menu_location": null
    },
    {
      "menu_name": "Cricket",
      "enabled": false,
      "sub-menu_location": "outdoor"
    },
    {
      "menu_name": "football",
      "enabled": false,
      "sub-menu_location": "outdoor"
    },
    {
      "menu_name": "Hockey",
      "enabled": false,
      "sub-menu_location": "outdoor"
    }
  ]
}

ibb.co/kdcwjk img preview

Vivin Prasannaa
– Vivin Prasannaa

2017-07-21 17:06:44 +00:00
Commented Jul 21, 2017 at 17:06 — Vivin Prasannaa
– Vivin Prasannaa, Commented Jul 21, 2017 at 17:06

0mpurdy · Accepted Answer · 2017-07-21 18:56:49Z

A couple of things to note:

The example data you give in the question would only allow for a single sub-menu item.
I do not know how you want to display this but from the picture I am guessing Bootstrap.
I don't think Bootstrap supports dropdown sub-items by default so I am going to use the syntax in this codepen example

Potential solution

If you store the data object as a property in your component, the following template should give you something to start with:

<li>
  <a class="dropdown-toggle" data-toggle="dropdown">Menu<b class="caret"></b></a>
  <ul class="dropdown-menu multi-level">
    <li *ngFor="let menuItem of data" class="dropdown-submenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{menuItem.menu_name}}</a>
      <ul *ngIf="menuItem.sub-menu_location" class="dropdown-menu">
        <li><a href="#">{{menuItem.sub-menu_location}}</a></li>
      </ul>
    </li>
  </ul>
</li>

Collectives™ on Stack Overflow

Dynamic Menu with Sub menu in angular 2

1 Answer 1

Potential solution

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Potential solution

Comments

Related