Getting started in Angular Ribbon component

22 Jul 202624 minutes to read

This section explains how to create a simple Ribbon component and configure its available functionalities in Angular.

Prerequisites

Requirement Version
Angular 12 and above
Node.js 14.0.0 or above, Recommended: Latest Version

Note: This guide supports recent Angular versions including Angular 21 and standalone components. For detailed compatibility, refer to the Angular version support matrix in the Syncfusion docs.

Angular supported versions

Angular Version Minimum Syncfusion® Angular Ribbon Version
Angular v20 29.2.8
Angular v19 26.1.35
Angular v18 25.2.3
Angular v17 23.2.4
Angular v16 21.1.39
Angular v15 20.4.38
Angular v14 20.2.36
Angular v13 19.4.38 and above
Angular v12 19.3.43

Browser support

Browser Supported Versions
Google Chrome, including Android & iOS Latest 2 versions
Mozilla Firefox Latest version
Microsoft Edge Latest 2 versions
Apple Safari, including iOS Latest 2 versions

Setup the Angular application

A straightforward approach to beginning with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Create a new application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app
  • This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]
  • By default, a CSS-based application is created. Use SCSS if required:
ng new syncfusion-angular-app --style=scss
  • During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Initial_setup

  • Select the required AI tool or ‘none’ if you do not need any AI tool.

Initial_setup

  • Navigate to your newly created application directory:
cd syncfusion-angular-app

Note: In Angular 19 and below, it uses app.ts, app.component.html, app.component.css etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Adding Syncfusion Angular Ribbon package

To install the Ribbon package, use the following command:

npm install @syncfusion/ej2-angular-ribbon

Adding CSS reference

Themes for the Syncfusion® component can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following npm command:

npm install @syncfusion/ej2-material3-theme

Then add the following CSS reference to the src/styles.css file. This is the default global stylesheet registered under styles in angular.json:

@import "@syncfusion/ej2-material3-theme/styles/material3.css";

Adding Ribbon component

Modify the template in the src/app/app.ts file to render the Ribbon component. Add the Angular Ribbon by using the <ejs-ribbon> selector in the template section of the app.ts file.

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>
@import 'node_modules/@syncfusion/ej2-tailwind3-theme/styles/ribbon/index.css';

/* 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;
}

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" };
}

Registering your Syncfusion license

Before using Syncfusion components, generate a license key from the Syncfusion License Dashboard and register it.

Open the main.ts file and add the following code:

import { registerLicense } from '@syncfusion/ej2-base';
registerLicense('YOUR_LICENSE_KEY');

Note: A valid Syncfusion license is required for production use. If a valid license is not registered, a trial license warning message will be displayed when the application runs.

Running the application

Run the application in the browser using the following command:

ng serve

Production build

To create an optimized production build, run:

ng build

This command compiles the application and generates the production-ready files in the dist/ directory.

To preview the production build locally, run:

npx http-server dist

Then open the URL displayed in the terminal.

Troubleshooting

  • Ribbon styles are not applied: Ensure the required Syncfusion theme CSS is imported in src/styles.css.
  • Trial license warning message: Register a valid Syncfusion license key using the registerLicense() method from @syncfusion/ej2-base.

  • Port 4200 is already in use: Stop the conflicting process or run the application on a different port:

    ng serve --port 3000