angular material pass table row data to menu items

Question

i need pass data from table row element to menu but it send only undefined data. i use matMenuTriggerData for that like this:

<ng-container matColumnDef="execute">
   <th mat-header-cell fxFlex="8%" fxLayoutAlign="start center" *matHeaderCellDef></th>
   <td mat-cell fxFlex="8%" fxLayoutAlign="start center" *matCellDef="let element">
       <button mat-icon-button [matMenuTriggerFor]="menu" [matMenuTriggerData]="element">
           <i class="material-icons" style="color: #368852">cloud_download</i>
       </button>
   </td>
</ng-container>

and menu:

<mat-menu #menu="matMenu">
    <ng-template matMenuContent let-aliasMenuItems="element">
  <button mat-menu-item (click)="cl(aliasMenuItems)">
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
....
</mat-menu>

if you want to see in stackblitz

Answer 1

You should pass data something like this [matMenuTriggerData]="{element: element}", If you want all the items. Because when you are accessing a variable like let-aliasMenuItems="element", you are trying to access variable's value not variable

If you would like to access variable's value which is priorityIndex then you can do something like this

[matMenuTriggerData]="element"

and

let-aliasMenuItems="priorityIndex"

Working stackblitz example