Ribbon Contextual Tabs
27 Aug 202524 minutes to read
Ribbon Contextual Tabs are special tabs that appear only when a specific object or context is selected, such as a table, image, or chart. They provide users with a set of tools relevant only to the selected item. These tabs can host all built-in and custom Ribbon items to perform specific actions.
Visible tabs
You can control the initial visibility of a contextual tab by setting the visible property to true or false within the e-ribbon-contextual-tab directive.
Adding Contextual Tabs
Add contextual tabs to the Ribbon by using the e-ribbon-contextual-tabs tag directive. You can define multiple contextual tabs, each containing one or more standard Ribbon tabs.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonContextualTabService } from '@syncfusion/ej2-angular-ribbon'
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, DisplayMode } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
providers: [ RibbonContextualTabService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public formatButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Format Painter" };
public headerButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-text-header", content: "Text Header" };
public wrapButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-text-wrap", content: "Text Wrap" };
public annotationButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-text-annotation", content: "Text Annotation" };
public altButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-text-alternative", content: "Alt Text" };
public forwardButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-bring-forward", content: "Bring Forward" };
public backwardButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-send-backward", content: "Send Backward" };
public selectionButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" };
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<ejs-ribbon id="ribbon">
<e-ribbon-contextual-tabs>
<e-ribbon-contextual-tab [visible]="true">
<e-ribbon-tabs>
<e-ribbon-tab header="Shape Format">
<e-ribbon-groups>
<e-ribbon-group header="Text decoration" [showLauncherIcon]="true">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="headerButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="wrapButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="annotationButton"> </e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Accessibility">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="altButton"> </e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Arrange" [showLauncherIcon]="true">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="forwardButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="backwardButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="selectionButton"> </e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</e-ribbon-contextual-tab>
</e-ribbon-contextual-tabs>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="cutButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="copyButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="formatButton"> </e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>Selected tabs
The isSelected property determines which contextual tab is active upon initialization. Setting this property to true makes the corresponding tab the currently selected one.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonContextualTabService } from '@syncfusion/ej2-angular-ribbon'
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, DisplayMode } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
providers: [ RibbonContextualTabService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public formatButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Format Painter" };
public styleButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-style", content: "Style" };
public textButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-font-name", content: "Text Box" };
public paintButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paint-bucket", content: "Paint" };
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="cutButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="copyButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="formatButton"> </e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
<e-ribbon-contextual-tabs>
<e-ribbon-contextual-tab [isSelected]="true" [visible]="true">
<e-ribbon-tabs>
<e-ribbon-tab header="Styles">
<e-ribbon-groups>
<e-ribbon-group header="Style" [showLauncherIcon]="true">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="styleButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="textButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="paintButton"> </e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</e-ribbon-contextual-tab>
</e-ribbon-contextual-tabs>
</ejs-ribbon>Methods
The Ribbon provides methods to dynamically manage the visibility of contextual tabs after the component has been initialized.
Show Tab
The showTab method makes a specific contextual tab visible in the Ribbon.
Hide Tab
The hideTab method hides a specific contextual tab in the Ribbon.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonContextualTabService } from '@syncfusion/ej2-angular-ribbon'
import { Component, ViewChild } from "@angular/core";
import { RibbonButtonSettingsModel, RibbonComponent } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
providers: [ RibbonContextualTabService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('ribbon') ribbon!: RibbonComponent;
@ViewChild('showContextual') showElement!: HTMLElement;
@ViewChild('hideContextual') hideElement!: HTMLElement;
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public formatButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Format Painter" };
public forwardButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-bring-forward", content: "Bring Forward" };
public backwardButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-send-backward", content: "Send Backward" };
public selectionButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" };
toggleRibbonTabs = (value: string) => {
(this.ribbon as any)[value]('ArrangeView', true);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<button (click)="toggleRibbonTabs('showTab')" class="e-btn"> Show tab </button>
<button (click)="toggleRibbonTabs('hideTab')" class="e-btn"> Hide tab </button>
<ejs-ribbon #ribbon id="ribbon" style="margin-top: 30px;">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="cutButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="copyButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="formatButton"> </e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
<e-ribbon-contextual-tabs>
<e-ribbon-contextual-tab>
<e-ribbon-tabs>
<e-ribbon-tab id="ArrangeView" header="Arrange & View">
<e-ribbon-groups>
<e-ribbon-group header="Arrange" [showLauncherIcon]="true">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="forwardButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="backwardButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="selectionButton"> </e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</e-ribbon-contextual-tab>
</e-ribbon-contextual-tabs>
</ejs-ribbon>