New to Kendo UI for Angular? Start a free 30-day trial

Implementing Kendo UI for Angular ContextMenu for TabStrip Tabs

Environment

Product

Progress® Kendo UI® TabStrip for Angular

Progress® Kendo UI® ContextMenu for Angular

Description

I need to display a context menu when a user right-clicks a tab in the Kendo UI TabStrip component in Angular. How can I achieve this?

This KB article also answers the following questions:

How can I target the tabs of the Kendo UI TabStrip component with a context menu in Angular?
What approach should I use to trigger a context menu on right-clicking a TabStrip tab?
How can I retrieve the text and index of the tab that was right-clicked in the TabStrip component?

Solution

To implement a context menu for the TabStrip component in Angular, use the Kendo UI ContextMenu component. Target the TabStrip component and filter the elements on which the ContextMenu will open.

The following steps demonstrate how to implement a ContextMenu for the TabStrip component in Angular:

Define the TabStrip component and the ContextMenu component in the template.

html

<kendo-contextmenu [target]="target.wrapper">
</kendo-contextmenu>

<kendo-tabstrip #target>
  <kendo-tabstrip-tab title="Kendo UI for Angular">
  </kendo-tabstrip-tab>
  <kendo-tabstrip-tab title="Kendo UI for React">
  </kendo-tabstrip-tab>
</kendo-tabstrip>

Set the target property of the ContextMenu component to the TabStrip component.

html

<kendo-contextmenu [target]="target.wrapper">
</kendo-contextmenu>

<kendo-tabstrip #target></kendo-tabstrip>

Use the filter property to specify the elements on which the ContextMenu will open.

html

<kendo-contextmenu [target]="target.wrapper" filter=".k-item">
</kendo-contextmenu>

<kendo-tabstrip #target>
  <kendo-tabstrip-tab title="Kendo UI for Angular">
  </kendo-tabstrip-tab>
  <kendo-tabstrip-tab title="Kendo UI for React">
  </kendo-tabstrip-tab>
</kendo-tabstrip>

Handle the (popupOpen) event of the ContextMenu component to retrieve the text and index of the tab that was right-clicked.

html

<kendo-contextmenu (popupOpen)="onPopupOpen($event)">
</kendo-contextmenu>

typescript

public onPopupOpen(ev: ContextMenuPopupEvent): void {
  const target = ev.target;
  // Retrieve the text and index of the tab that was right-clicked.
  this.tabText = target.innerText;
  // The index of the tab is stored in the 'ng-reflect-index' attribute.
  this.tabIndex = target.getAttribute('ng-reflect-index');
}

The following code snippet demonstrates the complete implementation of the ContextMenu for the TabStrip component in Angular.

typescript

import { Component } from '@angular/core';
import { KENDO_MENUS, MenuItem, ContextMenuPopupEvent } from '@progress/kendo-angular-menu';
import { KENDO_LAYOUT } from "@progress/kendo-angular-layout";

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [KENDO_MENUS, KENDO_LAYOUT],
  template: `
      <kendo-contextmenu [target]="target.wrapper" filter=".k-item" [items]="items" (popupOpen)="onPopupOpen($event)">
      </kendo-contextmenu>

      <kendo-tabstrip #target>
        <kendo-tabstrip-tab title="Kendo UI for Angular">
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab title="Kendo UI for React">
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
      <span>{{tabText}} {{tabIndex}}</span>
  `,
})
export class AppComponent {
  public tabText!: string;
  public tabIndex!: number;
  public items: MenuItem[] = [
    {
      text: 'File',
      items: [
        { text: 'New File' },
        { text: 'Open File' },
        { text: 'Save File' },
        { text: 'Close File' },
      ],
    },
    {
      text: 'Edit',
      items: [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }],
    },
  ];

  public onPopupOpen(ev: ContextMenuPopupEvent): void {
    const target = ev.target;
    this.tabText = target.innerText;
    this.tabIndex = target.getAttribute('ng-reflect-index');
  }
}

Implementing Kendo UI for Angular ContextMenu for TabStrip Tabs

Environment

Description

Solution

See Also