Help Pane in Angular Ribbon Component

27 Aug 20253 minutes to read

The Ribbon component includes a help pane, a dedicated area on the right side for displaying custom content. The helpPaneTemplate property allows for the definition of this content, or other useful information like document permissions or sharing features.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon'

import { Component } from "@angular/core";
import {  RibbonButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.css

app.component.html

<ejs-ribbon id="ribbon" [helpPaneTemplate]="undoredo">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
            <e-ribbon-groups>
                <e-ribbon-group>
                    <e-ribbon-collections>
                        <e-ribbon-collection>
                            <e-ribbon-items>
                                <e-ribbon-item type="Button" [buttonSettings]="cutButton">
                                </e-ribbon-item>
                            </e-ribbon-items>
                        </e-ribbon-collection>
                    </e-ribbon-collections>
                </e-ribbon-group>
            </e-ribbon-groups>
        </e-ribbon-tab>
    </e-ribbon-tabs>
    <ng-template #undoredo>
        <div class="helpPaneTemplate">
            <button class="action_btn"><label><span id="undo" class="e-icons e-undo"></span> Undo </label></button>
            <button class="action_btn"><label><span id="redo" class="e-icons e-redo"></span> Redo </label></button>
        </div>
    </ng-template>
</ejs-ribbon>