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

Question

I am trying to create a menu bar recursively using Angular Material Menu Bar directive, but the result is not being as expected. The best solution I have so far is to create a directive and call it recursively, like shown here: https://plnkr.co/edit/5pFmmD6K3qz5qolRifVA. Notice that there are two menu bars in this Plunker. The first is created with my recursive structure from a JSON and the second is written directly on the template. The problem with my solution happens when there are nested menus like "Lorem -> Dolor -> ...", as the nested menus are not being aligned correctly.

Inspecting the generated code on Chrome, I notice that the nested menu in the second menu bar (written directly on template) has some properties regarding its nest state:

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

while the same menu in the first menu bar doesn't:

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

What can I do to fix this?

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

Frederico Pantuzza · Accepted Answer · 2016-10-05 03:39:14Z

4

I was able to solve the problems with the menu behaviour by setting the attributes and classes mentioned in the question "manually" in the directive template, like this:

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

Where nestLevel is in the isolated scope and is incremented on every 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 by 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.

answered Oct 5, 2016 at 3:39

Frederico Pantuzza

3274 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Frederico Pantuzza Over a year ago

Although I don't think this is a very elegant solution, it is the only one that worked as expected so far. It will be the accepted answer until someone provides another one better.

El Asiduo Over a year ago

I don't see in the updated plunker the changes you mentioned. I'm facing the same problem and an example would be great to have. Thanks in advance!

K. Barresi Over a year ago

Works great for me. I think this issue is related to github.com/angular/material/issues/8697, ultimately caused by the children menus not knowing that they're part of a larger menu structure when placed in a directive.

yong · Accepted Answer · 2016-09-23 08:20:29Z

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

We can specify the origin by using the md-position-mode attribute on both the x and y axis. Right now only the x-axis has more than one option. You may specify the default mode of target target or target-right target to specify a right-oriented alignment target. See the position section of the demos for more examples.

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

OR

It is sometimes unavoidable to need to have a deeper level of control for the positioning of a menu to ensure perfect alignment. md-menu provides the md-offset attribute to allow pixel level specificty of adjusting the exact positioning.

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

For example, to move a menu by 2px from the top, we can use:

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

mdMenu API Documentation

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related