Items in the Angular Ribbon Component
27 Aug 202524 minutes to read
The Ribbon component renders various built-in items based on the type property of a ribbon-item. By default, this property is set to Button
, which renders a standard Button item.
Built-in Items
Render the built-in Ribbon items using the <e-ribbon-item>
tag. Specify the desired item by setting its type property.
The following table describes the available built-in items and their functions:
Built-in Ribbon Item | Action |
---|---|
Button | Renders a clickable button. |
CheckBox | Renders a checkbox for binary selection. |
DropDown | Renders a dropdown button with a popup list. |
SplitButton | Renders a button with a primary action and a secondary dropdown list. |
ComboBox | Renders a combo box for selection from a list of options. |
ColorPicker | Renders a color picker for color selection. |
GroupButton | Renders a group of related buttons. |
Button items
To render a Button
item, set the type property to Button
. You can customize its appearance and behavior using the RibbonButtonSettingsModel, which includes options like iconCss
, content
, and isToggle
.
Toggle button
The isToggle property can be used to define whether the button act as a toggle button or not. By default, the value is false
.
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
selector: "app-root",
template: `<!-- To Render Ribbon. -->
<ejs-ribbon id="ribbon">
<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]="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>
</ejs-ribbon>`,
})
export class AppComponent {
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut", isToggle: true };
}
CheckBox Items
To render a CheckBox
, set the type property to CheckBox
. Customize it using the RibbonCheckBoxSettingsModel, which provides options for label
, labelPosition
, and checked
state.
Checkbox state
You can use the checked property to handle the checked or unchecked state. By default, the value is false
.
import { Component } from "@angular/core";
import { RibbonCheckBoxSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
selector: "app-root",
template: `<!-- To Render Ribbon. -->
<ejs-ribbon id="ribbon">
<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=CheckBox [checkBoxSettings]="ruler">
</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>`,
})
export class AppComponent {
public ruler: RibbonCheckBoxSettingsModel = { label: "Ruler", checked: true };
}
Defining label
You can use the label property to add a caption for the CheckBox. The label position can be set Before
or After
, by using the labelPosition property. By default, the labelPosition is After
.
import { Component } from "@angular/core";
import { RibbonCheckBoxSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
selector: "app-root",
template: `<!-- To Render Ribbon. -->
<ejs-ribbon id="ribbon">
<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=CheckBox [checkBoxSettings]="ruler">
</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>`,
})
export class AppComponent {
public ruler: RibbonCheckBoxSettingsModel = { label: "Ruler", checked: true, labelPosition: "Before" };
}
DropDown Button Items
To render a DropDownButton
, set the type property to DropDown
. Customize it using the RibbonDropDownSettingsModel, which includes items
, iconCss
, content
, and a target
for the popup content.
Target
The target property specifies the element selector for the content to be displayed in the DropDownButton popup.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'
import { Component } from "@angular/core";
import { RibbonDropDownSettingsModel } from '@syncfusion/ej2-angular-ribbon';
import { ItemModel } from "@syncfusion/ej2-angular-splitbuttons";
@Component({
imports: [ RibbonModule, ListViewModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
public tableOptions: ItemModel[] = [{ text: "Insert Table" }, { text: "This device" }, { text: "Convert Table" }, { text: "Excel SpreadSheet" }];
public tableSettings: RibbonDropDownSettingsModel = { iconCss: "e-icons e-table", content: "Table", target: "#tableList"};
}
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="tables" >
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="DropDown" [dropDownSettings]="tableSettings">
</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>
<ejs-listview id='tableList' [dataSource]='tableOptions' headerTitle='Table' [showHeader]='true'></ejs-listview>
Customize Dropdown Button Item
Apply a custom CSS class to style dropdown items using the beforeItemRender event.
The following sample showcases how to customize a specific dropdown item.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'
import { Component } from "@angular/core";
import { RibbonDropDownSettingsModel } from '@syncfusion/ej2-angular-ribbon';
import { ItemModel, MenuEventArgs } from "@syncfusion/ej2-angular-splitbuttons";
@Component({
imports: [ RibbonModule, ListViewModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public tableOptions: ItemModel[] = [{ text: "Insert Table" }, { text: "This device" }, { text: "Convert Table" }, { text: "Excel SpreadSheet" }];
public tableSettings: RibbonDropDownSettingsModel = { iconCss: "e-icons e-table", content: "Table", items: this.tableOptions, beforeItemRender: (args: MenuEventArgs) => {
if (args.item.text === 'Insert Table') {
args.element.classList.add("e-custom-class");
}
} };
}
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="Insert">
<e-ribbon-groups>
<e-ribbon-group header="Tables">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="DropDown" [dropDownSettings]="tableSettings">
</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>
Create Dropdown Popup On-Demand
Set the createPopupOnClick property to true
to create the popup only when the dropdown is opened, optimizing performance.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { ListViewModule } from '@syncfusion/ej2-angular-lists';
import { Component } from "@angular/core";
import { RibbonDropDownSettingsModel } from '@syncfusion/ej2-angular-ribbon';
import { ItemModel } from "@syncfusion/ej2-angular-splitbuttons";
@Component({
imports: [ RibbonModule, ListViewModule ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public tableOptions: ItemModel[] = [{ text: "Insert Table" }, { text: "This device" }, { text: "Convert Table" }, { text: "Excel SpreadSheet" }];
public tableSettings: RibbonDropDownSettingsModel = { iconCss: "e-icons e-table", content: "Table", items: this.tableOptions, createPopupOnClick: true };
};
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="Insert">
<e-ribbon-groups>
<e-ribbon-group header="Tables">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="DropDown" [dropDownSettings]="tableSettings">
</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>
Split Button Items
To render a SplitButton
, set the type property to SplitButton
. Customize it with the RibbonSplitButtonSettingsModel, which provides options like iconCss
, items
, and target
.
Target
The target property specifies the element selector to be displayed in the SplitButton popup.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'
import { Component } from "@angular/core";
import { RibbonSplitButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';
import { ItemModel } from "@syncfusion/ej2-angular-splitbuttons";
@Component({
imports: [ RibbonModule, ListViewModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
public tableOptions: ItemModel[] = [{ text: "Insert Table" }, { text: "This device" }, { text: "Convert Table" }, { text: "Excel SpreadSheet" }];
public tableSettings: RibbonSplitButtonSettingsModel = { iconCss: "e-icons e-table", content: "Table", target: "#tableList"};
}
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="tables" >
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" [splitButtonSettings]="tableSettings">
</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>
<ejs-listview id='tableList' [dataSource]='tableOptions' headerTitle='Table' [showHeader]='true'></ejs-listview>
ComboBox Items
To render a ComboBox
item, set the type property to ComboBox
. You can configure it using the RibbonComboBoxSettingsModel, which provides options such as allowFiltering
, autoFill
, index
, sortOrder
and more.
Filtering
You can use the allowFiltering property to filter the data items. The filtering operation is initiated automatically, as soon as you start typing characters. If no match is found the value of the noRecordsTemplate
property will be displayed. By default, the value is false
.
import { Component } from "@angular/core";
import { RibbonComboBoxSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
selector: "app-root",
template: `<!-- To Render Ribbon. -->
<ejs-ribbon id="ribbon">
<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="ComboBox" [comboBoxSettings]="fontstyleSettings">
</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>`,
})
export class AppComponent {
public fontStyle: string[] = ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings"];
public fontstyleSettings: RibbonComboBoxSettingsModel = { dataSource: this.fontStyle, index: 3, allowFiltering: true };
}
Index
You can use the index property to get or set the selected item in the combobox.
import { Component } from "@angular/core";
import { RibbonComboBoxSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
selector: "app-root",
template: `<!-- To Render Ribbon. -->
<ejs-ribbon id="ribbon">
<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="ComboBox" [comboBoxSettings]="fontstyleSettings">
</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>`,
})
export class AppComponent {
public fontStyle: string[] = ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings"];
public fontstyleSettings: RibbonComboBoxSettingsModel = { dataSource: this.fontStyle, index: 3 };
}
SortOrder
You can use the sortOrder property to specify the order in which the DataSource should be sorted.
`None` | The data source is not sorted. |
`Ascending` | The data source is sorted in ascending order. |
`Descending` | The data source is sorted in descending order. |
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon'
import { Component } from "@angular/core";
import { RibbonComboBoxSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
public fontStyle: string[] = ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings"];
public fontstyleSettings: RibbonComboBoxSettingsModel = { dataSource: this.fontStyle, index: 3, sortOrder: "Descending" };
}
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" >
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="ComboBox" [comboBoxSettings]="fontstyleSettings">
</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>
Colorpicker items
To render a ColorPicker
, set the type property to ColorPicker
. Customize it using the RibbonColorPickerSettingsModel, which includes properties like value
, columns
, and showButtons
.
Value
You can use the value property to specify the color value. The value should be specified as Hex code.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonAllModule } from '@syncfusion/ej2-angular-ribbon'
import { Component } from "@angular/core";
import { RibbonColorPickerSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule, RibbonAllModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
public colorSettings: RibbonColorPickerSettingsModel = { value: '#123456' };
}
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" >
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="ColorPicker" [colorPickerSettings]="colorSettings">
</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>
GroupButton Items
To render a GroupButton
, set the type property to GroupButton
. Configure its items and selection behavior using the RibbonGroupButtonSettingsModel.
Items
You can render the groupbutton items by using the <e-ribbon-item>
tag directive. You can also customize the groupbutton items through RibbonGroupButtonItemModel, which provides options such as content
, iconCss
, selected
and more.
Item content
You can use the content property to define the text content for the groupbutton.
import { Component } from "@angular/core";
import {RibbonItemSize, RibbonGroupButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
selector: "app-root",
templateUrl: `<!-- To Render Ribbon. -->
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Paragraph" >
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="GroupButton" [allowedSizes]="mediumSize" [groupButtonSettings]="groupButtonContent">
</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>`,
})
export class AppComponent {
public groupButtonContent: RibbonGroupButtonSettingsModel = {
items: [
{iconCss: 'e-icons e-align-left', content: 'Align Left'},
{iconCss: 'e-icons e-align-center', content: 'Align Center'},
{iconCss: 'e-icons e-align-right', content: 'Align Right'},
{iconCss: 'e-icons e-justify', content: 'Justify'}
]
}
public mediumSize: RibbonItemSize = RibbonItemSize.Medium;
}
Icon only
You can use the iconCss property to customize the groupbutton icon. If the iconCss
property is not defined, the groupbutton will not be rendered.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon'
import { Component } from "@angular/core";
import {RibbonItemSize, RibbonGroupButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
public groupButtonIcon: RibbonGroupButtonSettingsModel = {
items: [
{iconCss: 'e-icons e-align-left'},
{iconCss: 'e-icons e-align-center'},
{iconCss: 'e-icons e-align-right'},
{iconCss: 'e-icons e-justify'}
]
}
public smallSize: RibbonItemSize = RibbonItemSize.Small;
}
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="Paragraph" >
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="GroupButton" [allowedSizes]="smallSize" [groupButtonSettings]="groupButtonIcon">
</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>
Selection
You can use the selected property to select the groupbutton item initally. When set to true
, the button will be selected. By default the selected
property is false.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon'
import { Component } from "@angular/core";
import {RibbonItemSize, RibbonGroupButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
public groupButtonSelected: RibbonGroupButtonSettingsModel = {
items: [
{iconCss: 'e-icons e-align-left', content: 'Align Left'},
{iconCss: 'e-icons e-align-center', content: 'Align Center', selected: true},
{iconCss: 'e-icons e-align-right', content: 'Align Right'},
{iconCss: 'e-icons e-justify', content: 'Justify'}
]
}
public smallSize: RibbonItemSize = RibbonItemSize.Small;
}
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="Paragraph" >
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="GroupButton" [allowedSizes]="smallSize" [groupButtonSettings]="groupButtonSelected">
</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>
Single selection
You can set the selection property value as RibbonGroupButtonSelection.Single
to make one selection at a time. It automatically deselects the previous choice when a different item is clicked.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon'
import { Component } from "@angular/core";
import {RibbonItemSize, RibbonGroupButtonSettingsModel, RibbonGroupButtonSelection } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
public singleSelection: RibbonGroupButtonSettingsModel = {
selection: RibbonGroupButtonSelection.Single,
items: [
{iconCss: 'e-icons e-align-left', content: 'Align Left'},
{iconCss: 'e-icons e-align-center', content: 'Align Center', selected: true},
{iconCss: 'e-icons e-align-right', content: 'Align Right'},
{iconCss: 'e-icons e-justify', content: 'Justify'}
]
}
public smallSize: RibbonItemSize = RibbonItemSize.Small;
}
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="Paragraph" >
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="GroupButton" [allowedSizes]="smallSize" [groupButtonSettings]="singleSelection">
</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>
Multiple selection
You can set the selection property value as RibbonGroupButtonSelection.Multiple
to select more than one button at a time. Users can select a button one by one to select multiple buttons.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon'
import { Component } from "@angular/core";
import {RibbonItemSize, RibbonGroupButtonSettingsModel, RibbonGroupButtonSelection } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
public multipleSelection: RibbonGroupButtonSettingsModel = {
selection: RibbonGroupButtonSelection.Multiple,
items: [
{iconCss: 'e-icons e-bold', content: 'Bold'},
{iconCss: 'e-icons e-italic', content: 'Italic', selected: true},
{iconCss: 'e-icons e-underline', content: 'Underline'},
{iconCss: 'e-icons e-strikethrough', content: 'Strikethrough', selected: true}
]
}
public smallSize: RibbonItemSize = RibbonItemSize.Small;
}
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="Paragraph" >
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="GroupButton" [allowedSizes]="smallSize" [groupButtonSettings]="multipleSelection">
</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>
Groupbutton in simplified mode layout
In simplified mode, the groupbutton will be rendered as a dropdownbutton. The dropdownbutton icon will be updated based on the button item selected. The initial button icon will be the set, if none of the buttons are selected.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon'
import { Component } from "@angular/core";
import {RibbonItemSize, RibbonGroupButtonSettingsModel, RibbonGroupButtonSelection } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
public groupButton: RibbonGroupButtonSettingsModel = {
selection: RibbonGroupButtonSelection.Single,
items: [
{iconCss: 'e-icons e-align-left', content: 'Align Left'},
{iconCss: 'e-icons e-align-center', content: 'Align Center', selected: true},
{iconCss: 'e-icons e-align-right', content: 'Align Right'},
{iconCss: 'e-icons e-justify', content: 'Justify'}
]
}
public smallSize: RibbonItemSize = RibbonItemSize.Small;
}
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" activeLayout="Simplified">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Paragraph" >
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="GroupButton" [allowedSizes]="smallSize" [groupButtonSettings]="groupButton">
</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>
Custom Items
To create custom Ribbon items, set the type property to Template
. This allows you to render any HTML content or non-built-in components, offering maximum flexibility.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon'
import { Component } from "@angular/core";
@Component({
imports: [ RibbonModule],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
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="Templates" [isCollapsible]=false>
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Template" [itemTemplate]="customTemplate">
<ng-template #customTemplate let-data="">
<span class="custom-template ">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
</span>
</ng-template>
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Multimedia" >
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Template" [itemTemplate]="itemTemplate">
<ng-template #itemTemplate let-data="">
<span class="ribbonTemplate ">
<span class="e-icons e-video"></span>
<span class="text">Video</span>
</span>
</ng-template>
</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>
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-ribbon/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
/* Represents the styles for Custom Ribbon Item */
.ribbonTemplate {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.ribbonTemplate.Large {
flex-direction: column;
}
.ribbonTemplate.Large .e-icons {
font-size: 35px;
}
.ribbonTemplate.Medium .e-icons,
.ribbonTemplate.Small .e-icons{
font-size: 20px;
margin: 15px 5px;
}
.ribbonTemplate.Small .text {
display:none;
}
.custom-template input {
margin-left: 10px;
width: 100px;
}
.custom-template.Medium {
display: flex;
align-items: center;
}
.custom-template.Medium input {
height: 14px;
margin-right: 10px;
}
Item Display Options
Use the displayOptions property to control in which Ribbon layouts an item appears.
Option | Description |
---|---|
Auto |
(Default) The item is displayed in all layouts. |
Classic |
The item is displayed only in the classic layout. |
Simplified |
The item is displayed only in the simplified layout. |
Overflow |
The item is displayed only in the overflow popup. |
Display items in Classic only
To display the items only in the classic layout group, set the mode as DisplayMode.Classic
in the displayOptions property.
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, DisplayMode } from '@syncfusion/ej2-angular-ribbon';
@Component({
selector: "app-root",
template: `<!-- To Render Ribbon. -->
<ejs-ribbon id="ribbon">
<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 [displayOptions]='buttonDisplayMode' 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>
</ejs-ribbon>`,
})
export class AppComponent {
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public buttonDisplayMode: DisplayMode = DisplayMode.Classic;
}
Display items in Simplified only
To display the items only in the simplified layout group, set the mode as DisplayMode.Simplified
in the displayOptions property.
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, DisplayMode } from '@syncfusion/ej2-angular-ribbon';
@Component({
selector: "app-root",
template: `<!-- To Render Ribbon. -->
<ejs-ribbon id="ribbon">
<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 [displayOptions]='buttonDisplayMode' 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>
</ejs-ribbon>`,
})
export class AppComponent {
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public buttonDisplayMode: DisplayMode = DisplayMode.Simplified;
}
Display items in Overflow popup only
To display the items only in the overflow, set the mode as DisplayMode.Overflow
in the displayOptions property.
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, DisplayMode } from '@syncfusion/ej2-angular-ribbon';
@Component({
selector: "app-root",
template: `<!-- To Render Ribbon. -->
<ejs-ribbon id="ribbon">
<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 [displayOptions]='buttonDisplayMode' 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>
</ejs-ribbon>`,
})
export class AppComponent {
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public buttonDisplayMode: DisplayMode = DisplayMode.Overflow;
}
Enable or Disable Items
Use the disabled property to enable or disable a Ribbon item. When set to true
, the item becomes non-interactive.
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
selector: "app-root",
template: `<!-- To Render Ribbon. -->
<ejs-ribbon id="ribbon">
<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 [disabled]="true" type="Button" [buttonSettings]="cutButton">
</e-ribbon-item>
<e-ribbon-item type=CheckBox [checkBoxSettings]="ruler">
</e-ribbon-item>
<e-ribbon-item type="DropDown" [dropDownSettings]="tableSettings">
</e-ribbon-item>
<e-ribbon-item type="SplitButton" [splitButtonSettings]="tableSettings">
</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>`,
})
export class AppComponent {
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut", isToggle: true };
public ruler: RibbonCheckBoxSettingsModel = { label: "Ruler", checked: true };
public tableSettings: RibbonDropDownSettingsModel = { iconCss: "e-icons e-table", content: "Table"};
}