1

I have an Angular Material table. I want a right click on table rows to open a context menu, and I can't really seem to get this to work. I'm using Angular 14.

I started by creating a menu:

<mat-menu #contextMenu="matMenu">
    <ng-template>
        <button mat-menu-item>D/button>
        <button mat-menu-item>C<button>
        <button mat-menu-item>B</button>
        <button mat-menu-item>A</button>
    </ng-template>
</mat-menu>

However, I couldn't find an Angular Material way of popping the menu as a context menu, I just found the Cdk way, using cdkContextMenuTriggerFor. My Material table row looks like this:

<tr
    mat-row
    *matRowDef="let row; columns: displayedColumns"
    [cdkContextMenuTriggerFor]="contextMenu"
></tr>

This caused a bunch of issues. First, Angular Material 14.2 uses Cdk 13, which doesn't have the Menu module. Updating the Cdk to version 14 added the Menu module, but right clicking on the table row causes an error, saying tableRef.createEmbeddedView is not a function.

This can be a problem with mismatching versions of Angular and CDK, or this can be a problem of mixing Angular Material menus with CDK menus. Or this can be something else entirely.

How do I get a context menu to pop up on an Angular Material table row?

zmbq
  • 38,013
  • 14
  • 101
  • 171

1 Answers1

1

Create cdkContextMenuTriggerFor in tr mat-row:

<tr mat-row [cdkContextMenuTriggerFor]="row_menu"
            *matRowDef="let row; columns: displayedColumns;"></tr>

and create ng-template for menu:

<ng-template #row_menu>
          <div class="menu-row" cdkMenu >
            <button class="menu-item" cdkMenuItem>Delete</button>
            <button class="menu-item" cdkMenuItem >Delete all</button>
            <button class="menu-item" cdkMenuItem>Insert</button>
          </div>
        </ng-template>

You have all that in Angular Material documentation https://material.angular.io/components/menu/overview

genije
  • 11
  • 3