md-menu as secondary action inside md-list-item

[dohomi]

Hello,

I would like to know if it is planned to add md-menu as secondary action to md-list-itemcomponent. Currently it is possible with custom markup, a better support would be highly appreciated! Thanks a lot for this component.

[ntatic]

Can you post snippet how did you make it with custom markup. I didn't have luck with it.

[dohomi]

@ntatic here is the code I came up with. I think most importantly don't use ng-click on the md-list-itemitself.

   <md-list>
                <md-list-item class="md-3-line" ng-repeat="training in vm.trainingList">
                    <div class="md-list-item-text" ng-click="$state.go('more_link'})">
                        <h3 class="md-subtitle">{{title}}</h3>
                        <h4>{{description}}</h4>
                        <p class="md-body-1">
                            {{more_info}}
                        </p>
                    </div>
                    <md-menu md-position-mode="target-right target">
                        <md-button class="md-icon-button" aria-label="{{'OPEN' | translate}}" ng-click="$mdOpenMenu()">
                            <md-icon md-menu-origin>more_vert</md-icon>
                        </md-button>
                        <md-menu-content width="3">
                            <md-menu-item>
                                <md-button ng-click="">
                                    <p>copy</p>
                                    <md-icon md-menu-align-target>content_copy</md-icon>
                                </md-button>
                            </md-menu-item>
                            <md-menu-divider></md-menu-divider>
                            <md-menu-item>
                                <md-button ng-click="">
                                    <p>delete</p>
                                    <md-icon md-menu-align-target>clear</md-icon>
                                </md-button>
                            </md-menu-item>
                        </md-menu-content>
                    </md-menu>
                </md-list-item>
            </md-list>

[rgolea]

+1

[TylerDixon]

+1

[houmark]

+1

[houmark]

Related to #3218 by the way. And I just tested your "workaround" and unfortunately it doesn't work in our md-list.

[bradmartin]

I've got the menu working inside but issue with separating the items.

     <md-list-item class="md-3-line" ng-repeat="user in users">
            <ng-md-icon class="md-avatar"
                        icon="person"
                        ng-show="!user.ProfilePic"
                        style="fill: #4a65ff"></ng-md-icon>
            <img alt="{{user.Name}}" ng-src="{{ user.ProfilePic }}"
                 ng-show="user.ProfilePic"
                 class="md-avatar" />
            <div class="md-list-item-text">
                <h3>
                    {{user.Name}}
                </h3>
                <h4>{{user.Email}}</h4>
                <p>
                    <span ng-if="user.LastLogin">Last login: {{user.LastLogin | date: 'short'}}</span>
                    <span ng-if="!user.LastLogin">Last login: Never</span>
                </p>
            </div>
            <md-menu md-offset="0 -7">
                <md-button aria-label="Open user detail menu"
                           class="md-icon-button"
                           ng-click="$mdOpenMenu($event)">
                    <ng-md-icon md-menu-origin icon="more_vert"
                                style="fill: #444;"></ng-md-icon>
                </md-button>
                <md-menu-content>
                    <md-menu-item>
                        <md-button ng-click="openResetPasswordDialog(user, $event)">
                            <span md-menu-align-target>Reset Password</span>
                        </md-button>
                    </md-menu-item>
                    <md-menu-item>
                        <md-button ng-click="openRenameUserDialog(user, $event)">
                            <span md-menu-align-target>Rename User</span>
                        </md-button>
                    </md-menu-item>

            </md-menu>

            <!--<md-divider ng-if="!$last"></md-divider>-->

        </md-list-item>

[mribichich]

+1

[AleksueiR]

+1

[andrea-vega]

+1

[rezonant]

+1

[gpopovic]

+1

[sch4lly]

+1

[dunmaksim]

+1

[marvinosswald]

+1 got it working on safari, chrome but not firefox

[ismarslomic]

+1

[patrykbialek]

Hi, didn't read entire history of that issue... I need the md-menu as well. I make some temp solution.
There you are:

    // Check for a secondary item and move it outside
    if ( secondaryItem && (
        isMdMenu(secondaryItem) ||
        secondaryItem.hasAttribute('ng-click') ||
        ( tAttrs.ngClick &&
        isProxiedElement(secondaryItem) )
      )) {
      tEl.addClass('md-with-secondary');
      tEl.append(secondaryItem);
    }

  function isMdMenu(el) {
    var nodeName = el.nodeName.toUpperCase();

    return nodeName == "MD-MENU";
  }

[devversion]

My PR #6459 is already pending.