Getting Started with Angular Ribbon Component

27 Aug 202524 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 the Angular CLI to set up your Angular applications. To install the Angular CLI globally, use the following command.

npm install -g @angular/cli

Create an Angular application

Start a new Angular application using the Angular CLI command below.

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

Starting with version 20.2.36, Syncfusion® Angular packages are distributed in the Ivy library format to support Angular’s modern Ivy rendering engine. These packages are compatible with Angular version 12 and higher.

Install the @syncfusion/ej2-angular-ribbon package using the following command.

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

Angular Compatibility Compiled (ngcc) Package

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 specify the ngcc package in the package.json file, add the -ngcc suffix to the package version.

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

Note: If you are using an Angular version below 12 and do not specify the -ngcc tag during installation, the Ivy package will be installed by default, which will result in a warning.

Adding CSS Reference

Import the required CSS theme files for the Ribbon component and its dependencies into your styles.css file.

@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 { RibbonModule, RibbonFileMenuService, RibbonColorPickerService ,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>