Help Pane in Angular Ribbon Component

26 Aug 20254 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 { 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>