nesterenes nesterenes - 4 months ago 56
AngularJS Question

Angular Material MenuBar with arrow toggle doesn't toggle correctly

I'm using Angular Material MenuBar and attempting to add an arrow toggle, so that when the menu is open the arrow is up, and toggles down when closed.

I'm able to use

ng-show
to trigger it when clicked. However if the user clicks out changing focus, closing the menu (without re-clicking the menu) the arrow is now in the wrong state and does not toggle back.

I also tried
ng-blur
which did not work the way I had hoped.

I think I need to watch the close event on the menu, but I'm not sure the best way to do that with
md-menu-bar
. Any suggestions on the best way to implement this toggle arrow?

<md-menu-bar id="user-menu">
<md-menu md-position-mode="left bottom">
<md-button class="user-button" ng-click="$mdOpenMenu($event); model.UserMenuOpen = !model.UserMenuOpen;" aria-label="User Settings">
<span class="username" hide-xs ng-if="profile">{{profile.firstName}} {{profile.lastName}}</span>

<md-icon md-font-icon="icon-chevron-down" class="icon s16" ng-show="model.UserMenuOpen"></md-icon>
<md-icon md-font-icon="icon-chevron-up" class="icon s16" ng-show="!model.UserMenuOpen"></md-icon>
</div>
</md-button>

<md-menu-content>
<md-menu-item>
<md-icon md-font-icon="icon-cart-outline" class="icon"></md-icon>
<md-button>Cart</md-button>
</md-menu-item>
<md-menu-item>
<md-icon md-font-icon="icon-account" class="icon"></md-icon>
<md-button>Profile</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-bar>

Answer

Solved via CSS using the md-open class.

#user-menu .arrow-up
{
  display: none; 
}

#user-menu md-menu .arrow-down
{
  display: inline; 
}

#user-menu md-menu.md-open .arrow-up
{
  display: inline; 
}

#user-menu md-menu.md-open .arrow-down
{
  display: none; 
}