How to dynamically create a JSON-based menu bar using Angular Material?

Question

I am trying to create a menu bar recursively using the Angular Material Menu Bar Directive , but the result is not as expected. The best solution that I have so far is to create a directive and call it recursively, as shown here: https://plnkr.co/edit/5pFmmD6K3qz5qolRifVA . Please note that this Plunker has two menu bars. The first one is created with my recursive structure from JSON, and the second one is written directly on the template. The problem with my solution arises when submenus such as "Lorem → Dolor → ..." because the submenus do not align correctly.

Checking the generated code in Chrome, I noticed that the submenu in the second line of the menu (written directly on the template) has some properties regarding the state of its socket:

<md-menu md-position-mode="cascade" class="md-nested-menu md-menu ng-scope" md-nest-level="1"> ... </md-menu> 

while in the same menu in the first line of the menu there is no:

 <md-menu ng-if="ctrl.isCompoundedMenuItem()" class="md-menu ng-scope"> ... </md-menu> 

What can I do to fix this?

---

Just adding info: I already tried the approach using ng-include to create a menu bar, but the result was terribly worse.

Answer 1

I managed to solve the problems with the menu behavior by setting the attributes and classes mentioned in the question “manually” in the directive template, for example:

 <md-menu ng-if="ctrl.isCompoundedMenuItem()" md-position-mode="cascade" class="md-nested-menu" md-nest-level="{{ ::nestLevel }}"> 

Where nestLevel is in an isolated area and increases at each new level:

 <md-menu-content class="md-menu-bar-menu md-dense"> <my-menu-item ng-repeat="item in menu.items" menu="item" nest-level="{{ ::(nestLevel + 1) }}"></my-menu-item> </md-menu-content> 

Starting from 1, naturally:

 <md-menu-bar ...> ... <md-menu-content> <my-menu-item ng-repeat="item in menu.items" menu="item" nest-level="1"></my-menu-item> </md-menu-content> </md-menu-bar> 

The updated plunker can be seen here: https://plnkr.co/edit/QBjeR2hZFKsJ88Hl4ptG .

Answer 2

Sometimes we want to specify alignment on the right side of an element, for example, if we have a menu on the right side of a toolbar, we want to align the contents of our menu.

We can indicate the start using the md-position-mode attribute for the x and y axis. Right now, only the x axis has more than one option. You can specify the default mode of the target or the target target to specify the right alignment target orientation. See the Demo Positions section for more information.

  <md-menu ng-if="ctrl.isCompoundedMenuItem()" md-position-mode="target-right target"> 

OR

Sometimes a deeper level of control is inevitably required to position the menu to ensure perfect alignment. md-menu provides the md-offset attribute to indicate pixel level specificity for fine-tuning positioning.

This offset is provided in xy or n format, where n will be used for both the x axis and y.

For example, to move a menu using 2px on top, we can use:

  <md-menu ng-if="ctrl.isCompoundedMenuItem()" md-offset="120 0"> 

MdMenu API Documentation