How to implement dropdown with dynamic levels in Angular

Question

I have a data structure like:

var menu_data=[
    {'name':'A', 'next':[{'name':'AA', 
                          'next':[{'name':'AAA', 
                                   'next': []}]}] },
    {'name':'B', 'next':[{'name':'BA', 'next':[]},
                         {'name':'BB', 'next':[]}
                        ]
    }
]

So the dropdown has following levels:

A->AA->AAA;

B->BA

 ->BB

The setup of the dropdown(menu) is purely driven by the menu_data, so the levels are not pre-determined. How can this be implemented?

Answer 1

you can add a dropdown component that calls itself when ever there is a next item.

<!-- dropdown.component.html -->
<ul>
  <li *ngFor="let item of menuData">
    {{ item.name }}
    <app-dropdown *ngIf="item.next.length > 0" [menuData]="item.next"></app-dropdown>
  </li>
</ul>

pass the data from your appComponent

<!-- app.component.html -->
<app-dropdown [menuData]="menu_data"></app-dropdown>