Primeng Context menu not working on tabpanel

Question

I have below code

<p-tabView #tabview *ngIf="mycondtion" class="page" [scrollable]="scrollable">
<ng-container *ngFor="let list of lists">
  <p-contextMenu [target]="link" [model]="items"> </p-contextMenu>
  <p-tabPanel [header]="list.listName" #link>
    <app-data-module [List]="list"></app-data-module>
  </p-tabPanel>
</ng-container>

on rightclick of tabpanel, it should show the context menu, but its not showing, i dont know what am i missing here? please help

Answer 1

You might be able to use header template (instead of a "header="). Something like this:

<p-tabView #tabview *ngIf="mycondtion" class="page" [scrollable]="scrollable">
  <p-tabPanel *ngFor="let list of lists">
    <ng-template pTemplate="header">
      <!-- Here is where all the header content will go, including the context menu -->
      <div #link>{{list.name}}</div>
      <p-contextMenu [target]="link" [model]="items"</p-contextMenu>
    </ng-template>

    <!-- Here is where the content of the tab will go -->
    <app-data-module [List]="list"></app-data-module>
  </p-tabPanel>
</p-tabView>

The main flaw here is, the context menu only appears when right-clicking on the <div>; clicking anywhere else in the tab header still won't work. I've not found a way around that, but hopefully this will help get you in the right direction.