How to hide menu option of first table after right click on second table using p-contextMenu and p-table?

Question

I have a p-table and p-contextMenu which gives me right click options on the table. When I right click on a row of first table I am able to view my right click options. When I right click on a row of second table I am able to view my right click options, but not able to hide the menu for first table.

As seen in the image when I right click on second table, first table right click option still remains. https://i.sstatic.net/FtybH.jpg

Data-Table-Component.html

<p-contextMenu #cm [model]="items" appendTo="body"></p-contextMenu>

<p-table [columns]="columns" [value]="tradeList" [(contextMenuSelection)]="selectedProduct" 
[contextMenu]="cm" dataKey="id" [rowHover]=true styleClass="p-datatable-striped p- 
datatable-responsive-demo"
selectionMode="multiple" [(selection)]="selectedTrade">
<ng-template pTemplate="header" let-columns>
<tr>
<th pSortableColumn *ngFor="let col of getKeys(columns)" pReorderableColumn 
 pResizableColumn>    {{col}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-block let-columns="columns" let- 
 rowIndex="rowIndex">
  <tr [pContextMenuRow]="block" [pSelectableRow]="block" 
 [pSelectableRowIndex]="rowIndex">
  <td *ngFor="let col of getKeys(columns)" (click)=fetchDataArray(block)>
  {{block[col]}}
 </td>
 </tr>
 </ng-template>

Data-Table-Component.ts

ngOnInit(): void{
this.items=[
 {label: 'Option 1',icon:'pi pi-user-edit'},
 {label: 'Option 2',icon:'pi pi-user-edit'},
 {label: 'Option 3',icon:'pi pi-user-edit'},
 {label: 'Option 4',icon:'pi pi-user-edit'},
 {label: 'Option 5',icon:'pi pi-user-edit'},
 ];
}

On click of a row of first table fetchDataArray function is called by which second table data is being fetched.

In ComponentBox file, I am calling the p-table which has been declared and passing the values as required for the tables.

Component-Box.html

<ng-template #tabdata>
<p-scrollPanel [style]="{width: '100%', height: '100%'}"   
<app-data-table [tradeList]="data" [selectedEntity]="entity" 
[entityData]="entityData" 
 (selectedTradeEvent)="fetchData($event)"></app-data-table> 
  // This gives us first table data and on click event which is 
  //selectedTradeEvent is called click of a row to fetch data for second 
 //table.
 </p-scrollPanel>
 <p-scrollPanel [style]="{width: '100%', height: '100%'}"   
 <app-data-table [tradeList]="table.value" [selectedEntity]="table.key" 
 [entityData]="entityData"> </app-data-table> 
 // This gives us second table data
</p-scrollPanel>
</ng-template>

Component-Box.ts file-

fetchDataArray(selectedItem){
this.entityData[this.entity]["showTables"].forEach(val=>{
this.service.sendGetRequest('getData?id='+selectedItem).then(data=> 
 {
 this.showTables.set("ABC",data);
 });
 });
}

Answer 1

I had similar problem where I had one contextmenu on p-table and second one on openlayer map (some div), and when opening first one then second one both are showed on screen. This is how I solved my problem... I already had functions to show context menu (because I had to position them where I wanted), so when opening one of contextmenu's I explicitly call hide on other one... here is code:

<p-contextMenu #cmMap [ngStyle]="{'position':'absolute', 'z-index':'10000', 'top':mapContextMenuY+'px', 'left':mapContextMenuX+'px'}" [model]="mapContextMenuItems"></p-contextMenu>
<p-contextMenu #cmTab [ngStyle]="{'position':'absolute', 'z-index':'10000', 'top':tabContextMenuY+'px', 'left':tabContextMenuX+'px'}" [model]="tabContextMenuItems"></p-contextMenu>
...
@ViewChild('cmMap') cmMap: ContextMenu;
@ViewChild('cmTab') cmTab: ContextMenu;
...
openCmTableRow(event: PointerEvent, cm: ContextMenu, row: IClipboard) {
  console.log(row);
  this.clipboardGeometrija = row;
  const tableHolderRect: DOMRect = this.leftSidebar.nativeElement.getBoundingClientRect();
  this.tabContextMenuX = event.x - tableHolderRect.x;
  this.tabContextMenuY = event.y - tableHolderRect.y;
  cm.show();
  this.cmMap.hide();
}
openCmMap(event: PointerEvent, cm: ContextMenu) {
  const kartaRect: DOMRect = this.karta.nativeElement.getBoundingClientRect();
  this.mapContextMenuX = event.x - kartaRect.x;
  this.mapContextMenuY = event.y - kartaRect.y;
  cm.show();
  this.cmTab.hide();
}