Gallery Items in Angular Ribbon component

27 Aug 202524 minutes to read

The Ribbon component supports a gallery feature that displays a collection of related items, such as icons, content, or images, to allow users to perform specific actions. To render a gallery in the Ribbon, use the <e-ribbon-item> tag directive with the type property set to Gallery.

The gallery can be configured through the RibbonGallerySettingsModel, which provides options to manage groups, itemCount, popupHeight, popupWidth, and more.

Groups

The gallery can be organized into logical groups using the groups property. Each group can be customized using the RibbonGalleryGroupModel, which includes options for items, cssClass, header, and more.

Adding Gallery Items

Gallery items are defined using the items property. Each item can be configured with the RibbonGalleryItemModel, which provides options like content, iconCss, and disabled.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonGalleryService } from '@syncfusion/ej2-angular-ribbon'

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

@Component({
imports: [ RibbonModule],

providers: [ RibbonGalleryService ],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: 'e-icons e-paste', items: this.pasteOptions, content: 'Paste' };
  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 gallerySettings: RibbonGallerySettingsModel = {
    groups: [{
      header: 'Styles',
      items: [
          {
              content: 'Normal'
          }, {
              content: 'No Spacing'
          }, {
              content: 'Heading 1'
          }, {
              content: 'Heading 2'
          }
        ]
    }]
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
                  <e-ribbon-collections>
                    <e-ribbon-collection>
                      <e-ribbon-items>
                        <e-ribbon-item type="SplitButton" [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="Gallery" >
                    <e-ribbon-collections>
                        <e-ribbon-collection>
                            <e-ribbon-items>
                                <e-ribbon-item type="Gallery" [gallerySettings]="gallerySettings">
                                </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>

Defining Item Content

The content property specifies the text to be displayed for a gallery item.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonGalleryService } from '@syncfusion/ej2-angular-ribbon'

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

@Component({
imports: [ RibbonModule],

providers: [ RibbonGalleryService ],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: 'e-icons e-paste', items: this.pasteOptions, content: 'Paste' };
  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 gallerySettings: RibbonGallerySettingsModel = {
    groups: [{
      header: 'Styles',
      items: [
          {
              content: 'Normal'
          }, {
              content: 'No Spacing'
          }, {
              content: 'Heading 1'
          }, {
              content: 'Heading 2'
          }
        ]
    }]
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
                  <e-ribbon-collections>
                    <e-ribbon-collection>
                      <e-ribbon-items>
                        <e-ribbon-item type="SplitButton" [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="Gallery" >
                    <e-ribbon-collections>
                        <e-ribbon-collection>
                            <e-ribbon-items>
                                <e-ribbon-item type="Gallery" [gallerySettings]="gallerySettings">
                                </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>

Defining Item Icons

To associate an icon with a gallery item, use the iconCss property.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonGalleryService } from '@syncfusion/ej2-angular-ribbon'

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

@Component({
imports: [ RibbonModule],

providers: [ RibbonGalleryService ],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: 'e-icons e-paste', items: this.pasteOptions, content: 'Paste' };
  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 gallerySettings: RibbonGallerySettingsModel = {
    groups: [{
      header: 'Transitions',
      items: [
          {
              content: 'None',
              iconCss: 'e-icons e-rectangle'
          }, {
              content: 'Fade',
              iconCss: 'e-icons e-send-backward'
          }, {
              content: 'Reveal',
              iconCss: 'e-icons e-bring-forward'
          }, {
              content: 'Zoom',
              iconCss: 'e-icons e-zoom-to-fit'
        }
      ]
    }]
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
                  <e-ribbon-collections>
                    <e-ribbon-collection>
                      <e-ribbon-items>
                        <e-ribbon-item type="SplitButton" [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="Gallery" >
                    <e-ribbon-collections>
                        <e-ribbon-collection>
                            <e-ribbon-items>
                                <e-ribbon-item type="Gallery" [gallerySettings]="gallerySettings">
                                </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 HTML Attributes to Items

The htmlAttributes property allows you to add custom HTML attributes to a gallery item’s element.

The following sample shows how to add a title attribute to a gallery item.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonGalleryService } from '@syncfusion/ej2-angular-ribbon'

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

@Component({
imports: [ RibbonModule],

providers: [ RibbonGalleryService ],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: 'e-icons e-paste', items: this.pasteOptions, content: 'Paste' };
  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 gallerySettings: RibbonGallerySettingsModel = {
    groups: [{
      header: 'Styles',
      items: [
          {
              content: 'Normal',
              htmlAttributes: { title: "Normal" }
          }, {
              content: 'No Spacing',
              htmlAttributes: { title: "No Spacing" }
          }, {
              content: 'Heading 1',
              htmlAttributes: { title: "Heading 1" }
          }, {
              content: 'Heading 2',
              htmlAttributes: { title: "Heading 2" }
          }
        ]
    }]
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
                  <e-ribbon-collections>
                    <e-ribbon-collection>
                      <e-ribbon-items>
                        <e-ribbon-item type="SplitButton" [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="Gallery" >
                    <e-ribbon-collections>
                        <e-ribbon-collection>
                            <e-ribbon-items>
                                <e-ribbon-item type="Gallery" [gallerySettings]="gallerySettings">
                                </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 Item Appearance

To apply a custom style to a gallery item, use the cssClass property.

The following sample demonstrates how to customize the appearance of a gallery item.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonGalleryService } from '@syncfusion/ej2-angular-ribbon'

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

@Component({
imports: [ RibbonModule],

providers: [ RibbonGalleryService ],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: 'e-icons e-paste', items: this.pasteOptions, content: 'Paste' };
  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 gallerySettings: RibbonGallerySettingsModel = {
    groups: [{
      header: 'Good, Bad and Neutral',
      items: [{
              content: 'Normal',
              cssClass: 'normal'
          }, {
              content: 'Bad',
              cssClass: 'bad'
          }, {
              content: 'Good',
              cssClass: 'good'
          }, {
              content: 'Neutral',
              cssClass: 'neutral'
          }
      ]
    }]
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
                  <e-ribbon-collections>
                    <e-ribbon-collection>
                      <e-ribbon-items>
                        <e-ribbon-item type="SplitButton" [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="Gallery" >
                    <e-ribbon-collections>
                        <e-ribbon-collection>
                            <e-ribbon-items>
                                <e-ribbon-item type="Gallery" [gallerySettings]="gallerySettings">
                                </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>

app.component.css

Disabling a Gallery Item

To disable a gallery item and prevent user interaction, set its disabled property to true. By default, this value is false.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonGalleryService } from '@syncfusion/ej2-angular-ribbon'

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

@Component({
imports: [ RibbonModule],

providers: [ RibbonGalleryService ],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: 'e-icons e-paste', items: this.pasteOptions, content: 'Paste' };
  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 gallerySettings: RibbonGallerySettingsModel = {
    groups: [{
      header: 'Styles',
      items: [
          {
              content: 'Normal',
              disabled: true
          }, {
              content: 'No Spacing'
          }, {
              content: 'Heading 1'
          }, {
              content: 'Heading 2'
          }
        ]
    }]
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
                  <e-ribbon-collections>
                    <e-ribbon-collection>
                      <e-ribbon-items>
                        <e-ribbon-item type="SplitButton" [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="Gallery" >
                    <e-ribbon-collections>
                        <e-ribbon-collection>
                            <e-ribbon-items>
                                <e-ribbon-item type="Gallery" [gallerySettings]="gallerySettings">
                                </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>

Defining a Group Header

The header property sets a title for a group of items within the gallery popup.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonGalleryService } from '@syncfusion/ej2-angular-ribbon'

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

@Component({
imports: [ RibbonModule],

providers: [ RibbonGalleryService ],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: 'e-icons e-paste', items: this.pasteOptions, content: 'Paste' };
  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 gallerySettings: RibbonGallerySettingsModel = {
    groups: [{
      header: 'Styles',
      items: [
          {
              content: 'Normal'
          }, {
              content: 'No Spacing'
          }, {
              content: 'Heading 1'
          }, {
              content: 'Heading 2'
          }
        ]
    }]
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
                  <e-ribbon-collections>
                    <e-ribbon-collection>
                      <e-ribbon-items>
                        <e-ribbon-item type="SplitButton" [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="Gallery" >
                    <e-ribbon-collections>
                        <e-ribbon-collection>
                            <e-ribbon-items>
                                <e-ribbon-item type="Gallery" [gallerySettings]="gallerySettings">
                                </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 Item Dimensions

The size of gallery items can be controlled using the itemWidth and itemHeight properties. When an itemHeight is set, items are aligned in rows according to the specified itemCount.

The following sample demonstrates how to set custom dimensions for gallery items.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonGalleryService } from '@syncfusion/ej2-angular-ribbon'

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

@Component({
imports: [ RibbonModule],

providers: [ RibbonGalleryService ],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: 'e-icons e-paste', items: this.pasteOptions, content: 'Paste' };
  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 gallerySettings: RibbonGallerySettingsModel = {
    popupWidth: '350',
    groups: [{
      itemWidth: '100',
      itemHeight: '30',
      header: 'Styles',
      items: [
          {
              content: 'Normal'
          }, {
              content: 'No Spacing'
          }, {
              content: 'Heading 1'
          }, {
              content: 'Heading 2'
          }, {
            content: 'Title'
          }, {
            content: 'Subtitle'
          }
        ]
    }]
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
                  <e-ribbon-collections>
                    <e-ribbon-collection>
                      <e-ribbon-items>
                        <e-ribbon-item type="SplitButton" [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="Gallery" >
                    <e-ribbon-collections>
                        <e-ribbon-collection>
                            <e-ribbon-items>
                                <e-ribbon-item type="Gallery" [gallerySettings]="gallerySettings">
                                </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 Group Appearance

To apply custom styles to a gallery group container, use the group’s cssClass property.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonGalleryService } from '@syncfusion/ej2-angular-ribbon'

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

@Component({
imports: [ RibbonModule],

providers: [ RibbonGalleryService ],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: 'e-icons e-paste', items: this.pasteOptions, content: 'Paste' };
  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 gallerySettings: RibbonGallerySettingsModel = {
    groups: [{
      header: 'Styles',
      cssClass: "custom-group",
      items: [
          {
              content: 'Normal'
          }, {
              content: 'No Spacing'
          }, {
              content: 'Heading 1'
          }, {
              content: 'Heading 2'
          }
        ]
    }]
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
                  <e-ribbon-collections>
                    <e-ribbon-collection>
                      <e-ribbon-items>
                        <e-ribbon-item type="SplitButton" [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="Gallery" >
                    <e-ribbon-collections>
                        <e-ribbon-collection>
                            <e-ribbon-items>
                                <e-ribbon-item type="Gallery" [gallerySettings]="gallerySettings">
                                </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>

app.component.css

Setting the Displayed Item Count

To control the number of items displayed inline in the Ribbon gallery, use the itemCount property. By default, the itemCount is 3.

The following example showcases a gallery with 4 items displayed.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonGalleryService } from '@syncfusion/ej2-angular-ribbon'

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

@Component({
imports: [ RibbonModule],

providers: [ RibbonGalleryService ],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: 'e-icons e-paste', items: this.pasteOptions, content: 'Paste' };
  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 gallerySettings: RibbonGallerySettingsModel = {
    itemCount: 4,
    groups: [{
      header: 'Styles',
      items: [
          {
              content: 'Normal'
          }, {
              content: 'No Spacing'
          }, {
              content: 'Heading 1'
          }, {
              content: 'Heading 2'
          }
        ]
    }]
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
                  <e-ribbon-collections>
                    <e-ribbon-collection>
                      <e-ribbon-items>
                        <e-ribbon-item type="SplitButton" [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="Gallery" >
                    <e-ribbon-collections>
                        <e-ribbon-collection>
                            <e-ribbon-items>
                                <e-ribbon-item type="Gallery" [gallerySettings]="gallerySettings">
                                </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>

Pre-selecting an Item

The selectedItemIndex property allows you to define the initially selected item in the gallery.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonGalleryService } from '@syncfusion/ej2-angular-ribbon'

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

@Component({
imports: [ RibbonModule],

providers: [ RibbonGalleryService ],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: 'e-icons e-paste', items: this.pasteOptions, content: 'Paste' };
  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 gallerySettings: RibbonGallerySettingsModel = {
    selectedItemIndex: 1,
    groups: [{
      header: 'Styles',
      items: [
          {
              content: 'Normal'
          }, {
              content: 'No Spacing'
          }, {
              content: 'Heading 1'
          }, {
              content: 'Heading 2'
          }
        ]
    }]
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
                  <e-ribbon-collections>
                    <e-ribbon-collection>
                      <e-ribbon-items>
                        <e-ribbon-item type="SplitButton" [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="Gallery" >
                    <e-ribbon-collections>
                        <e-ribbon-collection>
                            <e-ribbon-items>
                                <e-ribbon-item type="Gallery" [gallerySettings]="gallerySettings">
                                </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 Popup Dimensions

The dimensions of the gallery popup can be explicitly set using the popupHeight and popupWidth properties.

This sample demonstrates how to configure a custom size for the gallery popup.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonGalleryService } from '@syncfusion/ej2-angular-ribbon'

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

@Component({
imports: [ RibbonModule],

providers: [ RibbonGalleryService ],
standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
  public pasteSettings: RibbonSplitButtonSettingsModel = { iconCss: 'e-icons e-paste', items: this.pasteOptions, content: 'Paste' };
  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 gallerySettings: RibbonGallerySettingsModel = {
    popupHeight: '180',
    popupWidth: '350',
    groups: [{
      header: 'Styles',
      items: [
          {
              content: 'Normal'
          }, {
              content: 'No Spacing'
          }, {
              content: 'Heading 1'
          }, {
              content: 'Heading 2'
          }, {
            content: 'Title'
          }, {
            content: 'Subtitle'
          }
        ]
    }]
  };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<ejs-ribbon id="ribbon">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
            <e-ribbon-groups>
              <e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
                  <e-ribbon-collections>
                    <e-ribbon-collection>
                      <e-ribbon-items>
                        <e-ribbon-item type="SplitButton" [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="Gallery" >
                    <e-ribbon-collections>
                        <e-ribbon-collection>
                            <e-ribbon-items>
                                <e-ribbon-item type="Gallery" [gallerySettings]="gallerySettings">
                                </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>

Template

You can completely redefine the appearance and content of gallery items by using the template property.

Popup Template

To customize the gallery’s popup container, use the popupTemplate property.

The example below demonstrates how to implement both an template and a popupTemplate.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonGalleryService } from '@syncfusion/ej2-angular-ribbon'

import { Component, ViewChild } from "@angular/core";
import {RibbonGallerySettingsModel, RibbonSplitButtonSettingsModel, RibbonButtonSettingsModel } from "@syncfusion/ej2-angular-ribbon";
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
    imports: [ RibbonModule],
    providers: [ RibbonGalleryService ],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent{

    public pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge Format" }, { text: "Keep Text Only" }];
    public pasteButton: RibbonSplitButtonSettingsModel = { iconCss: 'e-icons e-paste', items: this.pasteOptions, content: 'Paste' };
    public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
    public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
    public formatPainter: RibbonButtonSettingsModel = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
    public aboveButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-insert-above", content: "Above"};
    public belowButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-insert-below", content: "Below"};
    public leftButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-insert-left", content: "Left"};
    public rightButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-insert-right", content: "Right"};
  
    @ViewChild('galleryTemplate', { static: true }) template!: any
    @ViewChild('ribbon') ribbon!: any
    public gallerySettings: RibbonGallerySettingsModel = {};
  
    ngOnInit(): void {
        this.gallerySettings = {
            template: this.template,
            popupTemplate: this.template,
            itemCount: 7,
            groups: [{
            header: 'Plain Tables',
            items: [
                { cssClass: "plainTables_item_1" },
                { cssClass: "plainTables_item_2" },
                { cssClass: "plainTables_item_3" },
                { cssClass: "plainTables_item_4" },
                { cssClass: "plainTables_item_5" },
                { cssClass: "plainTables_item_6" },
                { cssClass: "plainTables_item_7" }
            ]
            }, {
            header: 'List Tables',
            items: [
                { cssClass: "listTables_item_1" },
                { cssClass: "listTables_item_2" },
                { cssClass: "listTables_item_3" },
                { cssClass: "listTables_item_4" },
                { cssClass: "listTables_item_5" },
                { cssClass: "listTables_item_6" },
                { cssClass: "listTables_item_7" }
            ]
            }]
        }
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

app.component.html

<ejs-ribbon id="ribbon">
  <e-ribbon-tabs>
    <e-ribbon-tab header="Home">
      <e-ribbon-groups>
        <e-ribbon-group header="Clipboard" groupIconCss='e-icons e-paste'>
          <e-ribbon-collections>
            <e-ribbon-collection>
              <e-ribbon-items>
                <e-ribbon-item type="SplitButton" [splitButtonSettings]="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-item type="Button" [buttonSettings]="formatPainter">
                </e-ribbon-item>
              </e-ribbon-items>
            </e-ribbon-collection>
          </e-ribbon-collections>
        </e-ribbon-group>
        <e-ribbon-group header="Table Styles">
          <e-ribbon-collections>
            <e-ribbon-collection>
              <e-ribbon-items>
                <e-ribbon-item type="Gallery" [gallerySettings]="gallerySettings">
                </e-ribbon-item>
              </e-ribbon-items>
            </e-ribbon-collection>
          </e-ribbon-collections>
        </e-ribbon-group>
        <e-ribbon-group header="Insert">
          <e-ribbon-collections>
            <e-ribbon-collection>
              <e-ribbon-items>
                <e-ribbon-item type="Button" [buttonSettings]="aboveButton">
                </e-ribbon-item>
                <e-ribbon-item type="Button" [buttonSettings]="belowButton">
                </e-ribbon-item>
              </e-ribbon-items>
            </e-ribbon-collection>
            <e-ribbon-collection>
              <e-ribbon-items>
                <e-ribbon-item type="Button" [buttonSettings]="leftButton">
                </e-ribbon-item>
                <e-ribbon-item type="Button" [buttonSettings]="rightButton">
                </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>
<ng-template #galleryTemplate let-data>
  <div class="gallery-template ">
    <table class="table">
        <tbody>
            <tr class="row_one">
                <td class="tableContent">—</td>
                <td class="tableContent">—</td>
                <td class="tableContent">—</td>
                <td class="tableContent">—</td>
                <td class="tableContent">—</td>
            </tr>
            <tr class="row_two">
                <td class="tableContent">—</td>
                <td class="tableContent">—</td>
                <td class="tableContent">—</td>
                <td class="tableContent">—</td>
                <td class="tableContent">—</td>
            </tr>
            <tr class="row_three">
                <td class="tableContent">—</td>
                <td class="tableContent">—</td>
                <td class="tableContent">—</td>
                <td class="tableContent">—</td>
                <td class="tableContent">—</td>
            </tr>
        </tbody>
    </table>
  </div>
</ng-template>

app.component.css

To learn more about other built-in Ribbon item types, refer to the Ribbon Items documentation.