Getting started with Angular Ribbon component

11 Jul 202424 minutes to read

This section explains how to create a simple Ribbon, and demonstrate the basic usage of the Ribbon module in an Angular environment.

Dependencies

The list of dependencies required to use the Ribbon module in your application is given below:

|-- @syncfusion/ej2-angular-ribbon
    |-- @syncfusion/ej2-angular-base
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-splitbuttons
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-lists
    |-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-ribbon

Setup Angular environment

You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.

npm install -g @angular/cli

Create an Angular application

Start a new Angular application using below Angular CLI command.

ng new my-app
cd my-app

Installing Syncfusion Ribbon Package

Syncfusion packages are distributed in npm as @syncfusion scoped packages. You can get all the Angular Syncfusion package from npm link.

Currently, Syncfusion provides two types of package structures for Angular components,

  1. Ivy library distribution package format
  2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.

Ivy library distribution package

Syncfusion Angular packages(>=20.2.36) has been moved to the Ivy distribution to support the Angular Ivy rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.

Add @syncfusion/ej2-angular-ribbon package to the application.

npm install @syncfusion/ej2-angular-ribbon --save

Angular compatibility compiled package(ngcc)

For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. To download the ngcc package use the below.

Add @syncfusion/ej2-angular-ribbon@ngcc package to the application.

npm install @syncfusion/ej2-angular-ribbon@ngcc --save

To mention the ngcc package in the package.json file, add the suffix -ngcc with the package version as below.

@syncfusion/ej2-angular-ribbon:"21.1.35-ngcc"

Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.

Adding CSS reference

Add Ribbon component’s styles as given below in style.css.

@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-ribbon/styles/material.css";

Adding Syncfusion Ribbon component

Modify the template in app.component.ts file with ejs-ribbon to render the Ribbon component.

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
imports: [ RibbonModule ],
standalone: true,
selector: "app-root",
template: `<!-- To Render Ribbon. -->
  <ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home"></e-ribbon-tab>
    </e-ribbon-tabs>
  </ejs-ribbon>`,
})
export class AppComponent { }

Adding Ribbon Tab

In Ribbon, the options are arranged in tabs for easy access. You can use the <e-ribbon-tab> selector to define the ribbon tab like below.

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
imports: [ RibbonModule ],
standalone: true,
selector: "app-root",
template: `<!-- To Render Ribbon. -->
  <ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home"></e-ribbon-tab>
    </e-ribbon-tabs>
  </ejs-ribbon>`,
})
export class AppComponent { }

Adding Ribbon Group

To define a ribbon group under each tab, you can use the <e-ribbon-group> selector like below. The orientation property of ribbon group defines whether the collection of items will be rendered column-wise or row-wise.

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';

@Component({
imports: [ RibbonModule ],
standalone: true,
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" orientation="Row"></e-ribbon-group>
            </e-ribbon-groups>
        </e-ribbon-tab>
    </e-ribbon-tabs>
  </ejs-ribbon>`
})

Adding Ribbon Item

You can use the <e-ribbon-collection> selector to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the <e-ribbon-item> selector and the type property to specify the type of component to be rendered, like a button, a drop-down button, a combo box, and more.

import { Component } from "@angular/core";
import { RibbonModule } from '@syncfusion/ej2-angular-ribbon';
import { RibbonSplitButtonSettingsModel, RibbonButtonSettingsModel } from '@syncfusion/ej2-angular-ribbon';

@Component({
imports: [ RibbonModule ],
standalone: true,
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" orientation="Row">
                        <e-ribbon-collections>
                            <e-ribbon-collection id="paste-collection">
                                <e-ribbon-items>
                                    <e-ribbon-item type="SplitButton" [splitButtonSettings]="pasteSettings"></e-ribbon-item>
                                </e-ribbon-items>
                            </e-ribbon-collection>
                            <e-ribbon-collection id="cutcopy-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>`,
})
export class AppComponent {
  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: "e-icons e-paste", items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }], content: "Paste" };
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
}

Running the application

Run the application in the browser using the following command:

ng serve

The following example illustrates how tabs, groups, collections, and items are used in a ribbon component to form the ribbon layout.

import { Component } from '@angular/core';
import { FileMenuSettingsModel, RibbonButtonSettingsModel, RibbonSplitButtonSettingsModel, RibbonComboBoxSettingsModel, RibbonDropDownSettingsModel, RibbonItemSize, RibbonCheckBoxSettingsModel, RibbonColorPickerSettingsModel, DisplayMode } from '@syncfusion/ej2-angular-ribbon';

@Component({
imports: [ RibbonModule ],

providers: [ RibbonFileMenuService, RibbonColorPickerService ],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {

  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: "e-icons e-paste", items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }], content: "Paste" };
  public tableSettings: RibbonDropDownSettingsModel = { iconCss: "e-icons e-table", content: "Table", items: [{ text: "Insert Table" }, { text: "This device" }, { text: "Convert Table" }, { text: "Excel SpreadSheet" }] };

  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
  public formatButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
  public boldButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-bold", content: "Bold" };
  public italicButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-italic", content: "Italic" };
  public underlineButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-underline", content: "Underline" };
  public strikethroughButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-strikethrough", content: "Strikethrough" };
  public changecaseButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-change-case", content: "Change Case" };
  public editorButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-edit", content: "Editor" };
  public chartButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-chart", content: "Chart" };
  public printButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-print-layout", content: "Print Layout" };
  public webButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-web-layout", content: "Web Layout" };

  public fontSize: string[] = ["8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96"];
  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, width: "150px", allowFiltering: true };
  public fontsizeSettings: RibbonComboBoxSettingsModel = { dataSource: this.fontSize, index: 3, width: "65px", allowFiltering: true };

  public colorSettings: RibbonColorPickerSettingsModel = { value: "#123456" };

  public ruler: RibbonCheckBoxSettingsModel = { label: "Ruler", checked: false };
  public grid: RibbonCheckBoxSettingsModel = { label: "Gridlines", checked: false };
  public navigation: RibbonCheckBoxSettingsModel = { label: "Navigation Pane", checked: false };

  public fileSettings: FileMenuSettingsModel = {
    menuItems: [
      { text: "New", iconCss: "e-icons e-file-new", id: "new" },
      { text: "Open", iconCss: "e-icons e-folder-open", id: "open" },
      { text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
      { text: "Save as", iconCss: "e-icons e-save", id: "save" }
    ],
    visible: true
  };

  public largeSize: RibbonItemSize = RibbonItemSize.Large;
  public smallSize: RibbonItemSize = RibbonItemSize.Small;

  public Simplified: DisplayMode = DisplayMode.Simplified;
  public Overflow: DisplayMode = DisplayMode.Overflow;

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<ejs-ribbon id="default" [fileMenu]="fileSettings">
  <e-ribbon-tabs>
    <e-ribbon-tab header="Home">
      <e-ribbon-groups>
        <e-ribbon-group header="Clipboard" id="clipboard" groupIconCss="e-icons e-paste" [showLauncherIcon]=true>
          <e-ribbon-collections>
            <e-ribbon-collection>
              <e-ribbon-items>
                <e-ribbon-item type="SplitButton" [allowedSizes]="largeSize" [splitButtonSettings]="pasteSettings">
                </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-item type="Button" [buttonSettings]="formatButton">
                </e-ribbon-item>
              </e-ribbon-items>
            </e-ribbon-collection>
          </e-ribbon-collections>
        </e-ribbon-group>
        <e-ribbon-group header="Font" orientation="Row" [enableGroupOverflow]=true [isCollapsible]=false
          groupIconCss="e-icons e-bold" cssClass="font-group">
          <e-ribbon-collections>
            <e-ribbon-collection>
              <e-ribbon-items>
                <e-ribbon-item type="ComboBox" [comboBoxSettings]="fontstyleSettings">
                </e-ribbon-item>
                <e-ribbon-item type="ComboBox" [comboBoxSettings]="fontsizeSettings">
                </e-ribbon-item>
              </e-ribbon-items>
            </e-ribbon-collection>
            <e-ribbon-collection>
              <e-ribbon-items>
                <e-ribbon-item type="ColorPicker" [allowedSizes]="smallSize" [displayOptions]='Simplified'
                  [colorPickerSettings]="colorSettings">
                </e-ribbon-item>
                <e-ribbon-item type="Button" [allowedSizes]="smallSize" [buttonSettings]="boldButton">
                </e-ribbon-item>
                <e-ribbon-item type="Button" [allowedSizes]="smallSize" [buttonSettings]="italicButton">
                </e-ribbon-item>
                <e-ribbon-item type="Button" [allowedSizes]="smallSize" [buttonSettings]="underlineButton">
                </e-ribbon-item>
                <e-ribbon-item type="Button" [allowedSizes]="smallSize" [buttonSettings]="strikethroughButton">
                </e-ribbon-item>
                <e-ribbon-item type="Button" [allowedSizes]="smallSize" [buttonSettings]="changecaseButton">
                </e-ribbon-item>
              </e-ribbon-items>
            </e-ribbon-collection>
          </e-ribbon-collections>
        </e-ribbon-group>
        <e-ribbon-group header="Editor" [isCollapsible]=false groupIconCss="e-icons e-edit">
          <e-ribbon-collections>
            <e-ribbon-collection>
              <e-ribbon-items>
                <e-ribbon-item type="Button" [allowedSizes]="largeSize" [buttonSettings]="editorButton">
                </e-ribbon-item>
              </e-ribbon-items>
            </e-ribbon-collection>
          </e-ribbon-collections>
        </e-ribbon-group>
      </e-ribbon-groups>
    </e-ribbon-tab>
    <e-ribbon-tab header="Insert">
      <e-ribbon-groups>
        <e-ribbon-group header="tables" [isCollapsible]="false">
          <e-ribbon-collections>
            <e-ribbon-collection>
              <e-ribbon-items>
                <e-ribbon-item type="DropDown" [allowedSizes]="largeSize" [dropDownSettings]="tableSettings">
                </e-ribbon-item>
              </e-ribbon-items>
            </e-ribbon-collection>
          </e-ribbon-collections>
        </e-ribbon-group>
        <e-ribbon-group header="Illustrations" id="illustration" [showLauncherIcon]=true orientation="Row"
          [enableGroupOverflow]=true>
          <e-ribbon-collections>
            <e-ribbon-collection>
              <e-ribbon-items>
                <e-ribbon-item [allowedSizes]="largeSize" [buttonSettings]="chartButton">
                </e-ribbon-item>
              </e-ribbon-items>
            </e-ribbon-collection>
          </e-ribbon-collections>
        </e-ribbon-group>
        <e-ribbon-group header="Media" [isCollapsible]="false">
          <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-tab header="View">
      <e-ribbon-groups>
        <e-ribbon-group header="Views" orientation="Row" groupIconCss="e-icons e-print">
          <e-ribbon-collections>
            <e-ribbon-collection>
              <e-ribbon-items>
                <e-ribbon-item [allowedSizes]="largeSize" type="Button" [buttonSettings]="printButton">
                </e-ribbon-item>
                <e-ribbon-item [allowedSizes]="largeSize" type="Button" [buttonSettings]="webButton">
                </e-ribbon-item>
              </e-ribbon-items>
            </e-ribbon-collection>
          </e-ribbon-collections>
        </e-ribbon-group>
        <e-ribbon-group header="show" [isCollapsible]=false>
          <e-ribbon-collections>
            <e-ribbon-collection>
              <e-ribbon-items>
                <e-ribbon-item type="CheckBox" [checkBoxSettings]="ruler">
                </e-ribbon-item>
                <e-ribbon-item type="CheckBox" [checkBoxSettings]="grid">
                </e-ribbon-item>
                <e-ribbon-item type="CheckBox" [checkBoxSettings]="navigation">
                </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>
/* Represents the styles for ribbonTemplate */
.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;
}

/* Represents the styles for Ribbon group */
.font-group .e-ribbon-group-content {
  justify-content: center;
}