Allow styling of menu actuators

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

When I trigger an md-menu with an actuator (usually a button) connected with md-menu-trigger-for, I want an easy way to change the appearance of the actuator for as long as the menu is open that doesn’t involve a custom component or directive.

What is the current behavior?

md-menu-trigger-for offers onMenuOpen and onMenuClose events that allow for custom behaviors but it does nothing to allow custom appearances with just template logic and CSS.

What are the steps to reproduce?

Standard button menu example:

<button md-icon-button class=“md-primary” [md-menu-trigger-for]=“myMenu”> <md-icon>create</md-icon> </button> <cfc-menu #myMenu=“cfcMenu” [menu]=“myMenuModel”></cfc-menu>

What is the use-case or motivation for changing an existing behavior?

Many Material menu buttons I know use a “held open” appearance for the button while the menu is opened. This goes away when the menu is closed by any means (clicking on the backdrop, clicking on the button again, etc.).

Which versions of Angular, Material, OS, browsers are affected?

ng2 Material 2

Is there anything else we should know?

jelbourn proposed: “I would implement it as the menu exposing an isOpen property, so you could do something like:”

<button md-menu-trigger-for=“myMenu” [class.xx-menu-open]=“myMenu.isOpen”>

[jelbourn]

@dansanderson Ah, I missed that property. It would be

<button md-menu-trigger-for="..." 
    #trigger="mdMenuTrigger" 
    [class.xx-open]="trigger.menuOpen">

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}