Angular: Как открыть два мат-меню в одном HTML?

Здесь у меня есть два matmenus в HTML одного компонента. При открытии второго matmenu (второе matmenu открывается, когда я щелкаю правой кнопкой мыши по этому div), но открывается первое matmenu, так как по-разному открывать оба меню в одном компоненте HTML при разных щелчках в angular?

HTML

(this is first menu)
<mat-icon style = "cursor: pointer;" [matMenuTriggerFor] = "menu">more_vert   
  <mat-menu #menu = "matMenu"> 
    <button mat-menu-item (click) = "addNewItem()">New Folder</button>
    <button mat-menu-item (click) = "uploadFiles()">Upload Files</button>
  </mat-menu> 
</mat-icon>

(This is second menu)

<mat-card *ngFor = "let imagespayload of uploadedImagesObj"(click) = "activeFolder=imagespayload"
   (contextmenu) = "onContextMenu($event, imagespayload)">

   <div style = "position: fixed"
     [style.left] = "contextMenuPosition.x"
     [style.top] = "contextMenuPosition.y"
     [matMenuTriggerFor] = "contextMenu"
     [matMenuTriggerData] = "{item: imagespayload}">
   </div>

  <mat-menu #contextMenu = "matMenu">
    <ng-template matMenuContent let-item = "item">
      <button mat-menu-item>Action 1</button>
      <button mat-menu-item>Action 2</button>
    </ng-template>
  </mat-menu>

TS

  import { Component, OnInit, Input,ViewChild } from '@angular/core';
  import { MatMenuTrigger } from '@angular/material';

  @ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;
  contextMenuPosition = { x: '0px', y: '0px' };

 onContextMenu(event: MouseEvent, imagespayload) {
   event.preventDefault();
   this.contextMenuPosition.x = event.clientX + 'px';
   this.contextMenuPosition.y = event.clientY + 'px';
   this.contextMenu.menuData = { imagespayload};
   this.contextMenu.openMenu();
}