question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:6
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
djsanj007commented, Jul 11, 2018

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

4reactions
cgatiancommented, Nov 2, 2017

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Azure Blob storage trigger for Azure Functions | Microsoft Learn
Learn how to run an Azure Function as Azure Blob storage data changes. ... This value is passed directly by a Queue Storage...
Read more >
Develop code in Databricks notebooks
Databricks provides tools that allow you to format Python and SQL code in notebook cells quickly and easily. These tools reduce the effort ......
Read more >
onselected event in md-select in Angular 4 - Stack Overflow
Another way is to use (onSelectionChange) event on <md-option> : <md-select placeholder="State"> <md-option *ngFor="let state of states" ...
Read more >
Creating and managing build triggers - Google Cloud
This feature is only available if you create a GitHub trigger. ... Now if you make a change to src/README.md , Cloud Build...
Read more >
JavaScript · Bootstrap
Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" ... Options can be passed via data attributes or JavaScript.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found