You can certainly pass an object to a mat-menu by using the matMenuTriggerData
directive. This object can contain a single value, another object, or even an array of values or objects. Here's how I solved it:
My challenge was this: I wanted to dynamically build a list of menu items (mat-menu-item
) based on the contents of an array. How did I manage to pass that array of objects to my mat-menu
?
In your component class you can define the array of objects:
export class MyComponent implements OnInit {
menuData: any;
ngOnInit() {
this.menuData = {
menuItems: [
{code: '1', name: 'first'},
{code: '2', name: 'second'}
]
};
}
}
Notice that the object I will pass to the matMenuTriggerData
directive of the button that opens the mat-menu
content, is the data member called menuData
. This member has only one property which is an array of objects. These represent the actual menu items I want to display in my template. The template is shown below:
<mat-menu #app-menu="matMenu">
<ng-template matMenuContent let-aliasMenuItems="menuItems">
<button mat-menu-item *ngFor="let item of aliasMenuItems">
Item {{item.code}}: {{item.name}}
</button>
</ng-template>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="app-menu" [matMenuTriggerData]="menuData">
<mat-icon>more_vert</mat-icon>
</button>
Let me explain what is going on in the template: The button defined in the bottom of the template has been linked to the mat-menu
called 'app-menu'
. This is done by typing [matMenuTriggerFor]="app-menu"
.
The next thing we do is passing the component's member data to the mat-menu
through this directive: [matMenuTriggerData]="menuData"
. The mat-menu
instance that we named app-menu
can now grab the content of that member data.
As you can see, the <ng-template>
accesses the property of 'menuData'
that we have named 'menuItems'
. The <ng-template>
adds a pointer or alias to that property (called aliasMenuItems
), like this: <ng-template let-aliasMenuItems="menuItems">
. Now we are able to loop through our defined array of menu items inside the <ng-template>
.
In my example, I create a <button mat-menu-item></button>
element for each menu item object that exists in my component's menuData.menuItems
array, like this:
<button mat-menu-item *ngFor="let item of aliasMenuItems">
Item {{item.code}}: {{item.name}}
</button>
I hope you find this answer useful.
menuOpened
event of the MatMenuTrigger directive and then calculate in the handler function and set the right matMenuTriggerData reference.