Backstage in Angular Ribbon Component
27 Aug 202524 minutes to read
The Angular Ribbon component includes a Backstage view, which serves as a comprehensive replacement for the traditional file menu. It is designed to display application-level information and settings, such as user details, document properties, or options pages. The Backstage view is enabled by configuring the backStageMenu property.
When active, backstage options are displayed in a list on the left, and the content for the selected option appears on the right.
Adding backstage items
Define and add items to the Backstage view by populating the items property. To display the Backstage, set the visible property to true. By default, the Backstage view is hidden.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, BackStageMenuModel, BackstageItemModel, RibbonBackstageService, RibbonModule } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule ],
providers: [ RibbonBackstageService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public getBackstageContent(item: string): string {
var content = "";
switch (item) {
case "home":
{
content = "<div id='home-wrapper' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'> New document </span></div></div><div id='block-wrapper'><div class='section-title'> Recent </div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td> <span style='display: block; font-size: 14px'> Ribbon.docx </span><span style='font-size: 12px'> EJ2 >> Components >> Navigations >> Ribbon >> default </span></td></tr></tbody></table></div></div></div>";
break;
}
case "new":
{
content = "<div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div> <span class='doc_category_text'> New document </span></div></div>";
break;
}
case "open":
{
content = "<div id='open-content' style='padding: 20px;'><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td> <span style='display: block; font-size: 14px'> Open in Desktop App </span><span style='font-size: 12px'> Use the full functionality of Ribbon </span></td></tr></tbody></table></div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-protect-sheet'></span> </td><td> <span style='display: block; font-size: 14px'> Protect Document </span><span style='font-size: 12px'>To prevent accidental changes, this document has been set to open as view-only.</span></td></tr></tbody></table></div></div>";
break;
}
}
return content;
}
public menuItems: BackstageItemModel[] = [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: this.getBackstageContent('home') },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: this.getBackstageContent('new') },
{ id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: this.getBackstageContent('open') }
];
public backstageSettings: BackStageMenuModel = {
text: 'File',
visible: true,
items: this.menuItems,
backButton: {
text: 'Close',
}
}
}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" [backStageMenu]="backstageSettings">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="pasteButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<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-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>Adding footer items
To designate an item as a footer menu item, set its isFooter property in the items collection to true.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, BackStageMenuModel, BackstageItemModel, RibbonBackstageService, RibbonModule } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule ],
providers: [ RibbonBackstageService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public getBackstageContent(item: string): string {
var content = "";
switch (item) {
case "home":
{
content = "<div id='home-wrapper' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'> New document </span></div></div><div id='block-wrapper'><div class='section-title'> Recent </div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td> <span style='display: block; font-size: 14px'> Ribbon.docx </span><span style='font-size: 12px'> EJ2 >> Components >> Navigations >> Ribbon >> default </span></td></tr></tbody></table></div></div></div>";
break;
}
case "new":
{
content = "<div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div> <span class='doc_category_text'> New document </span></div></div>";
break;
}
case "open":
{
content = "<div id='open-content' style='padding: 20px;'><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td> <span style='display: block; font-size: 14px'> Open in Desktop App </span><span style='font-size: 12px'> Use the full functionality of Ribbon </span></td></tr></tbody></table></div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-protect-sheet'></span> </td><td> <span style='display: block; font-size: 14px'> Protect Document </span><span style='font-size: 12px'>To prevent accidental changes, this document has been set to open as view-only.</span></td></tr></tbody></table></div></div>";
break;
}
case "account":
{
content = "<div id='account-content' style='padding: 20px;'><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-people'></span> </td><td> <span style='display: block; font-size: 14px'>Account type</span><span style='font-size: 12px'>Administrator</span></td></tr></tbody></table></div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-password'></span> </td><td> <span style='display: block; font-size: 14px'>Password protected</span><span style='font-size: 12px'>Yes</span></td></tr></tbody></table></div></div>";
break;
}
}
return content;
}
public menuItems: BackstageItemModel[] = [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: this.getBackstageContent('home') },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: this.getBackstageContent('new') },
{ id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: this.getBackstageContent('open') },
{ separator: true, isFooter: true },
{ id: 'account', text: 'Account', isFooter: true, content: this.getBackstageContent('account') }
];
public backstageSettings: BackStageMenuModel = {
text: 'File',
visible: true,
items: this.menuItems,
backButton: {
text: 'Close',
}
}
}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" [backStageMenu]="backstageSettings">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="pasteButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<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-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>Adding a separator
Separators are horizontal lines used to visually group related items within the Backstage view. To add a separator, set the separator property of a Backstage item to true.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from "@angular/core";
import { RibbonModule, RibbonBackstageService, RibbonButtonSettingsModel, BackStageMenuModel, BackstageItemModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule ],
providers: [ RibbonBackstageService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public getBackstageContent(item: string): string {
var content = "";
switch (item) {
case "home":
{
content = "<div id='home-wrapper' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'> New document </span></div></div><div id='block-wrapper'><div class='section-title'> Recent </div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td> <span style='display: block; font-size: 14px'> Ribbon.docx </span><span style='font-size: 12px'> EJ2 >> Components >> Navigations >> Ribbon >> default </span></td></tr></tbody></table></div></div></div>";
break;
}
case "new":
{
content = "<div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div> <span class='doc_category_text'> New document </span></div></div>";
break;
}
case "open":
{
content = "<div id='open-content' style='padding: 20px;'><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td> <span style='display: block; font-size: 14px'> Open in Desktop App </span><span style='font-size: 12px'> Use the full functionality of Ribbon </span></td></tr></tbody></table></div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-protect-sheet'></span> </td><td> <span style='display: block; font-size: 14px'> Protect Document </span><span style='font-size: 12px'>To prevent accidental changes, this document has been set to open as view-only.</span></td></tr></tbody></table></div></div>";
break;
}
case "print":
{
content = "<div id='print-content' style='min-width: 300px; padding: 20px;'><h2>Print this document</h2><button id='togglebtn' class='e-control e-btn e-lib e-flat e-primary'><span class='e-btn-icon e-btn-sb-icons e-icons e-print e-icon-left'></span>Print</button></div>";
break;
}
}
return content;
}
public menuItems: BackstageItemModel[] = [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: this.getBackstageContent('home') },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: this.getBackstageContent('new') },
{ id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: this.getBackstageContent('open') },
{ separator: true },
{ id: 'print', text: 'Print', content: this.getBackstageContent('print') }
];
public backstageSettings: BackStageMenuModel = {
text: 'File',
visible: true,
items: this.menuItems,
backButton: {
text: 'Close',
}
}
}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" [backStageMenu]="backstageSettings">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="pasteButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<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-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>Back button customization
Customize the text and icon of the Backstage view’s close button using the backButton property. The button’s text is set with the text property and its icon with the iconCss property. The back button is displayed by setting its visible property to true.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, BackStageMenuModel, BackstageItemModel, RibbonModule, RibbonBackstageService } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule ],
providers: [ RibbonBackstageService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public homeContentTemplate() {
return "<div id='home-wrapper' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'> New document </span></div></div><div id='block-wrapper'><div class='section-title'> Recent </div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td> <span style='display: block; font-size: 14px'> Ribbon.docx </span><span style='font-size: 12px'> EJ2 >> Components >> Navigations >> Ribbon >> default </span></td></tr></tbody></table></div></div></div>";
}
public menuItems: BackstageItemModel[] = [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: this.homeContentTemplate() }
];
public backstageSettings: BackStageMenuModel = {
visible: true,
items: this.menuItems,
backButton: {
text: 'Close',
}
}
}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" [backStageMenu]="backstageSettings">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="pasteButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<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-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>Backstage target element
The target property specifies the selector for the element where the Backstage view will be displayed. The target element must have its CSS position set to relative. If it does not, the Backstage will be positioned relative to the nearest parent element that has this styling. By default, the Backstage is positioned relative to the Ribbon element.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, BackStageMenuModel, BackstageItemModel, RibbonModule, RibbonBackstageService } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule ],
providers: [ RibbonBackstageService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public getBackstageContent(item: string): string {
var content = "";
switch (item) {
case "home":
{
content = "<div id='home-wrapper' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'> New document </span></div></div><div id='block-wrapper'><div class='section-title'> Recent </div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td> <span style='display: block; font-size: 14px'> Ribbon.docx </span><span style='font-size: 12px'> EJ2 >> Components >> Navigations >> Ribbon >> default </span></td></tr></tbody></table></div></div></div>";
break;
}
case "new":
{
content = "<div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div> <span class='doc_category_text'> New document </span></div></div>";
break;
}
case "open":
{
content = "<div id='open-content' style='padding: 20px;'><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td> <span style='display: block; font-size: 14px'> Open in Desktop App </span><span style='font-size: 12px'> Use the full functionality of Ribbon </span></td></tr></tbody></table></div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-protect-sheet'></span> </td><td> <span style='display: block; font-size: 14px'> Protect Document </span><span style='font-size: 12px'>To prevent accidental changes, this document has been set to open as view-only.</span></td></tr></tbody></table></div></div>";
break;
}
}
return content;
}
public menuItems: BackstageItemModel[] = [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: this.getBackstageContent('home') },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: this.getBackstageContent('new') },
{ id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: this.getBackstageContent('open') }
];
public backstageSettings: BackStageMenuModel = {
text: 'File',
visible: true,
items: this.menuItems,
target: '#targetElement',
backButton: {
text: 'Close',
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<div id="targetElement"></div>
<ejs-ribbon id="ribbon" [backStageMenu]="backstageSettings">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="pasteButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<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-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>Customizing with templates
The template property allows for complete customization of the Backstage view’s menu items and their corresponding content area.
import { NgModule, Renderer2 } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component, ViewChild } from "@angular/core";
import { RibbonModule, RibbonBackstageService, RibbonButtonSettingsModel, BackStageMenuModel } from '@syncfusion/ej2-angular-ribbon';
import { Ribbon } from '@syncfusion/ej2-ribbon';
@Component({
imports: [ RibbonModule ],
providers: [ RibbonBackstageService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('ribbon') ribbonObj!: Ribbon;
constructor(private renderer: Renderer2) {}
public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public contentClick(id: string) {
let ribbonEle = document.getElementById('ribbon');
if(ribbonEle) {
let content = ribbonEle.querySelector('.content-open');
if (content) {
content.classList.replace('content-open', 'content-close');
}
ribbonEle.querySelector('#' + id + '-wrapper')?.classList.add('content-open');
}
}
public closeContent() {
if (this.ribbonObj) {
( this.ribbonObj.element.querySelector('#ribbon_backstagepopup') as HTMLElement).style.display = 'none';
}
}
public ribbonCreated() {
if (this.ribbonObj) {
this.ribbonObj.element.querySelector('.e-ribbon-backstage')?.addEventListener('click', this.displayPopup);
}
}
public displayPopup() {
let backstagePopup = this.ribbonObj.element.querySelector('#ribbon_backstagepopup') as HTMLElement;
if (backstagePopup) {
backstagePopup.style.display = 'block';
}
}
public homeContentTemplate() {
return "<div id='temp-content' style='width: 550px; height: 350px; display: flex'><div id='items-wrapper' style='width: 130px; height:100%; background: #779de8;'><ul><li id='close'><span class='e-icons e-close'></span>Close</li><li id='new'><span class='e-icons e-file-new'></span>New</li><li id='open'><span class='e-icons e-folder-open'></span>Open</li><li id='save'><span class='e-icons e-save'></span>Save</li></ul></div><div id='content-wrapper'><div id='new-wrapper' class='content-open' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'>New</div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'>New document</span></div></div></div><div id='save-wrapper' class='content-close' style='padding: 20px;'><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td><span class='doc_icon e-icons e-save'></span></td><td><span style='display: block; font-size: 14px'>Save as</span><span style='font-size: 12px'>Save as copy online</span></td></tr></tbody></table></div><div class='section-content' style='padding: 12px 0px cursor: pointer'><table><tbody><tr><td><span class='doc_icon e-icons e-rename'></span></td><td><span style='display: block; font-size: 14px'>Rename</span><span style='font-size: 12px'>Rename this file.</span></td></tr></tbody></table></div></div><div id='open-wrapper' class='content-close' style='padding: 20px;'><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td><span class='doc_icon e-icons e-open-link'></span></td><td><span style='display: block; font-size: 14px'>Ribbon.docx</span><span style='font-size: 12px'>EJ2 >> Components >> Navigations >> Ribbon >> default</span></td></tr></tbody></table></div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td><span class='doc_icon e-icons e-open-link'></span></td><td><span style='display: block; font-size: 14px'>Classic_layout.docx</span><span style='font-size: 12px'>EJ2 >> Components >> Navigations >> Ribbon >> layouts</span></td></tr></tbody></table></div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td><span class='doc_icon e-icons e-open-link'></span></td><td><span style='display: block; font-size: 14px'>Simplified_layout.docx</span><span style='font-size: 12px'>EJ2 >> Components >> Navigations >> Ribbon >> layouts</span></td></tr></tbody></table></div></div></div></div>";
}
ngAfterViewInit() {
setTimeout(() => {
const closeBtn = document.getElementById('close');
const newBtn = document.getElementById('new');
const openBtn = document.getElementById('open');
const saveBtn = document.getElementById('save');
if (closeBtn) { this.renderer.listen(closeBtn, 'click', () => this.closeContent()); }
if (newBtn) { this.renderer.listen(newBtn, 'click', () => this.contentClick('new')); }
if (openBtn) { this.renderer.listen(openBtn, 'click', () => this.contentClick('open')); }
if (saveBtn) { this.renderer.listen(saveBtn, 'click', () => this.contentClick('save')); }
}, 100);
}
public backstageSettings: BackStageMenuModel = {
visible: true,
template: this.homeContentTemplate()
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<ejs-ribbon #ribbon id="ribbon" [backStageMenu]="backstageSettings" (created)="ribbonCreated()">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="pasteButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<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-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>Setting width and height
The height and width of the Backstage view can be explicitly set using the height and width properties. If not set, the dimensions are calculated automatically based on the content.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, BackStageMenuModel, BackstageItemModel, RibbonModule, RibbonBackstageService } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule ],
providers: [ RibbonBackstageService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public getBackstageContent(item: string): string {
var content = "";
switch (item) {
case "home":
{
content = "<div id='home-wrapper' style='padding: 20px;'><div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div><span class='doc_category_text'> New document </span></div></div><div id='block-wrapper'><div class='section-title'> Recent </div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td> <span style='display: block; font-size: 14px'> Ribbon.docx </span><span style='font-size: 12px'> EJ2 >> Components >> Navigations >> Ribbon >> default </span></td></tr></tbody></table></div></div></div>";
break;
}
case "new":
{
content = "<div id='new-section' class='new-wrapper'><div class='section-title'> New </div><div class='category_container'><div class='doc_category_image'></div> <span class='doc_category_text'> New document </span></div></div>";
break;
}
case "open":
{
content = "<div id='open-content' style='padding: 20px;'><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-open-link'></span> </td><td> <span style='display: block; font-size: 14px'> Open in Desktop App </span><span style='font-size: 12px'> Use the full functionality of Ribbon </span></td></tr></tbody></table></div><div class='section-content' style='padding: 12px 0px; cursor: pointer'><table><tbody><tr><td> <span class='doc_icon e-icons e-protect-sheet'></span> </td><td> <span style='display: block; font-size: 14px'> Protect Document </span><span style='font-size: 12px'>To prevent accidental changes, this document has been set to open as view-only.</span></td></tr></tbody></table></div></div>";
break;
}
}
return content;
}
public menuItems: BackstageItemModel[] = [
{ id: 'home', text: 'Home', iconCss: 'e-icons e-home', content: this.getBackstageContent('home') },
{ id: 'new', text: 'New', iconCss: 'e-icons e-file-new', content: this.getBackstageContent('new') },
{ id: 'open', text: 'Open', iconCss: 'e-icons e-folder-open', content: this.getBackstageContent('open') }
];
public backstageSettings: BackStageMenuModel = {
height: "350px",
width: "500px",
text: 'File',
visible: true,
items: this.menuItems,
backButton: {
text: 'Close',
}
}
}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" [backStageMenu]="backstageSettings">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" [buttonSettings]="pasteButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<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-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>