I have an actions column in a mat table. In the actions column I have an icon button. I want to show the mat-menu when the icon button is clicked. Below is the column config

  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Actions</th>
    <td mat-cell *matCellDef="let element">
      <button [matMenuTriggerFor]="appMenu" mat-icon-button aria-label="">
        <mat-icon>more_vert</mat-icon>
      </button>

      <mat-menu #appMenu="matMenu">
        <button mat-menu-item>
          <mat-icon>dialpad</mat-icon>
          <span>Menu item</span>
        </button>
      </mat-menu>
    </td>
  </ng-container>

This does not render the menu upon the button click. But when I move the same code outside the mat table it works. The below works outside the table.

  <button [matMenuTriggerFor]="appMenu" mat-icon-button aria-label="">
    <mat-icon>more_vert</mat-icon>
  </button>

  <mat-menu #appMenu="matMenu">
    <button mat-menu-item>
      <mat-icon>dialpad</mat-icon>
      <span>Menu item</span>
    </button>
  </mat-menu>

Am I missing something or this is a bug with Angular material?

>Solution :

I just tried what you suggest in this demo, and it works fine