CODEWITHSUNDEEP
angularmat-tab
Miya
Miya

Reputation: 1

How to Put a Right-Click Context Menu on the Mat-tab-group component

I am trying to implement a context menu pop up with a right click from the user.

Here is an existing implementation with a mat-tab-list:

https://stackblitz.com/edit/angular-material-context-menu?file=app%2Fcontext-menu-example.html I am trying to implement the same functionality but with a mat-tab-group component instead, here is a mat-tab-group example:

https://stackblitz.com/edit/mat-tabs-closing-example?file=app%2Ftab-group-basic-example.html Anyone with Angular and Mat-tab-group experience know how to incorporate the context menu functionality into a mat-tab-group component?

Upvotes: 0

Views: 2307

Answers (1)

Eliseo
Eliseo

Reputation: 57909

Miya, material angular has change from the code of the stackblitz. Now you need a "div" that was the MatMenuTrigger

You can read, e.g. this link

The idea is use a "div" fixed

<div [ngStyle]="{position:'fixed',
     top:contextMenuPosition.y,
     left:contextMenuPosition.x}" 
     [matMenuTriggerFor]="contextMenu"></div>

Now your tabs can have a ng-template mat-tab-label like

 <ng-template mat-tab-label>
    <div class="col" style="margin-left: 20px" 
        (contextmenu)="onContextMenu($event, {index:index})"
    >
      {{tab.name}}
    </div>
  </ng-template>

See that you pass as "second argument" an object with the properties you need -In the e.g. I use the index of the tab-

Your forked stackblitz

Upvotes: 0

Related Questions