I am facing an issue with the action in my menu. For this project, I am using a material menu and icons. The main menu code appears as follows:
<mat-menu #rootMenu="matMenu" [overlapTrigger]="false">
<ng-template matMenuContent let-element="element">
<div *ngFor='let item of contextMenu' (click)="item.action(element)">
<button *ngIf='!item.seperator' mat-menu-item [disabled]="item.disabled">
<mat-icon>
{{item.icon}}
</mat-icon>
<span>
{{item.name}}
</span>
</button>
<mat-divider *ngIf='item.seperator'></mat-divider>
</div>
</ng-template>
</mat-menu>
Now, let me show you the model for my menu element:
export class MenuElement {
id?: string
name?: string
tooltip?: string
icon?: string
action: (element : any) => void
disabled?: boolean = true
seperator?: boolean = false
}
Lastly, here is a snippet of the menu in the component ts:
constructor(public dialog: MatDialog) { //#1
...
this.contextMenu =
...
{
name: 'Rename',
icon: 'edit',
action: this.openRenameDialog,
disabled: true
},
...
This is the openRenameDialog function:
openRenameDialog(element: FileElement) {
let dialogRef = this.dialog.open(RenameDialogComponent);
dialogRef.afterClosed().subscribe(res => {
if (res) {
element.name = res;
this.elementRenamed.emit(element);
}
});
}
Lastly, let's address the error at hand:
core.js:5828 ERROR TypeError: Cannot read property 'open' of undefined at Object.openRenameDialog [as action] (lib-common.js:4857) at FileExplorerComponent_ng_template_8_div_0_Template_div_click_0_listener (lib-common.js:4550) at executeListenerWithErrorHandling (core.js:21593) at wrapListenerIn_markDirtyAndPreventDefault (core.js:21635) at HTMLDivElement. (platform-browser.js:934) at ZoneDelegate.invokeTask (zone-evergreen.js:400) at Object.onInvokeTask (core.js:40744) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Zone.runTask (zone-evergreen.js:168) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:481)
Any suggestions on what steps I should take next?
Edit 1
The dialog has been injected, refer to #1