Components: [Feature] Allow data to be passed in to MdMenu by trigger

[Daeluse]

Bug, feature request, or proposal:

This is a feature to allow for a wider use case concerning MdMenu

What is the expected behavior?

There should be a relatively easy way to allow for a MdMenu trigger to pass data into the MdMenu for use within the menu itself.

What is the current behavior?

Currently, I'm unsure of any practical ways to allow MdMenus to be context sensitive.

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

In my current situation, I am building a list of items each of which have an icon button which triggers a menu. Within the menu are the options to edit, copy, or delete the item in the list. To simplify the operation, I would like to have one MdMenu definition and each trigger pass in a different object.

In my environment, I'm using a forked version of the MdMenu component which has this sort of function hacked into it, and what I came up with is as follows:

<md-menu #dynamicMenu="mdMenu">
  <!-- The component has a property named 'context' which is set by the trigger -->
  <div *ngIf="dynamicMenu.context">
    <!-- The context can be consumed using the template variable -->
    <button md-menu-item (click)="edit(dynamicMenu.context)">
      Edit
    </button>
    <button md-menu-item (click)="copy(dynamicMenu.context)">
      Copy
    </button>
    <button md-menu-item (click)="delete(dynamicMenu.context)">
      Delete
    </button>
  </div>
</md-menu>
<ng-template ngFor let-item [ngForOf]="items">
  <!-- The trigger will need to assign 'context' to the MdMenu -->
  <button md-icon-button [mdMenuTriggerFor]="dynamicMenu" [mdMenuTriggerContext]="item">
    <md-icon>
      more_vert
    </md-icon>
  </button>
</ng-template>

I'm sure there's probably a better way to do this, but I think it illustrates what I'm trying to achieve with MdMenu and gives better insight into what this Feature Request is about. I've had a couple of co-workers ask about the functionality countless times, so I don't think i'm the only one attempting to do something like this. Any insight onto how this can be done with the current MdMenu setup, or any thoughts on implementing this?

[germanamz]

@andrewseguin @kara by the moment is there a way to achieve this?

[cgatian]

This would definitely improve performance by allowing you to could create a single MatMenu for a list of items. Currently, there's no way to pass context to the templateRef of the portal on menu-trigger.

[jelbourn]

@crisbeto does your recent PR capture this?

[crisbeto]

It does. Closing as a duplicate of https://github.com/angular/material2/issues/9251.

[adamdport]

For those that landed here looking for a solution, they've updated the docs: https://material.angular.io/components/menu/overview#passing-in-data-to-a-menu

<mat-menu #appMenu="matMenu">
  <ng-template matMenuContent let-name="name">
    <button mat-menu-item>Settings</button>
    <button mat-menu-item>Log off {{name}}</button>
  </ng-template>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu" [matMenuTriggerData]="{name: 'Sally'}">
  <mat-icon>more_vert</mat-icon>
</button>

<button mat-icon-button [matMenuTriggerFor]="appMenu" [matMenuTriggerData]="{name: 'Bob'}">
  <mat-icon>more_vert</mat-icon>
</button>

[djsanj007]

How can we pass a complex structure data via matMenuTriggerData?

Let's suppose i want to pass array of object which we will reiterate in submenu

[iliassays]

How can we pass a complex structure data via matMenuTriggerData?
Let's suppose i want to pass array of object which we will reiterate in submenu

Any answer of question made by djsanj007 on July 2018?

[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._}