File Menu in Angular Ribbon component

28 Sep 202323 minutes to read

The Ribbon component provides a built-in file menu that allows you to add menu items for performing specific actions. The file menu can be enabled by setting the fileMenu property.

Visibility

You can show the file menu by setting the visible property to true. By default, the file menu is hidden.

app.component.ts
app.module.ts
main.ts
app.component.html
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, FileMenuSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public fileSettings: FileMenuSettingsModel = {
      menuItems: [{ text: "New", iconCss: "e-icons e-file-new", id: "new" }],
      visible: true
  };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RibbonModule, RibbonFileMenuService } from "@syncfusion/ej2-angular-ribbon";
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, RibbonModule ], // Registering EJ2 Ribbon Module.
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ RibbonFileMenuService ]
  })
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<ejs-ribbon id="ribbon" [fileMenu]='fileSettings'>
  <e-ribbon-tabs>
      <e-ribbon-tab header="Home">
          <e-ribbon-groups>
              <e-ribbon-group header="Clipboard">
                  <e-ribbon-collections>
                      <e-ribbon-collection>
                          <e-ribbon-items>
                              <e-ribbon-item type="Button" [buttonSettings]="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-items>
                      </e-ribbon-collection>
                  </e-ribbon-collections>
              </e-ribbon-group>
          </e-ribbon-groups>
      </e-ribbon-tab>
  </e-ribbon-tabs>
</ejs-ribbon>

The menu items can be added to the file menu using the menuItems property as an array of MenuItemModel.

app.component.ts
app.module.ts
main.ts
app.component.html
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, FileMenuSettingsModel } from '@syncfusion/ej2-angular-ribbon';
import { MenuItemModel } from "@syncfusion/ej2-navigations";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public fileOptions: MenuItemModel[] = [{ 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" }]
  public fileSettings: FileMenuSettingsModel = {
      menuItems: this.fileOptions,
      visible: true
  };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RibbonModule, RibbonFileMenuService } from "@syncfusion/ej2-angular-ribbon";
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, RibbonModule ], // Registering EJ2 Ribbon Module.
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ RibbonFileMenuService ]
  })
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<ejs-ribbon id="ribbon" [fileMenu]="fileSettings">
    <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
            <e-ribbon-groups>
                <e-ribbon-group header="Clipboard">
                    <e-ribbon-collections>
                        <e-ribbon-collection>
                            <e-ribbon-items>
                                <e-ribbon-item type="Button" [buttonSettings]="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-items>
                        </e-ribbon-collection>
                    </e-ribbon-collections>
                </e-ribbon-group>
            </e-ribbon-groups>
        </e-ribbon-tab>
    </e-ribbon-tabs>
</ejs-ribbon>

Open submenu on click

You can open the submenu on menu item click, by setting the showItemOnClick property to true. By default, the submenu will open on mouse hover.

app.component.ts
app.module.ts
main.ts
app.component.html
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, FileMenuSettingsModel } from '@syncfusion/ej2-angular-ribbon';
import { MenuItemModel } from "@syncfusion/ej2-navigations";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public fileOptions: MenuItemModel[] =[
      { 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',
          items: [
              { text: 'Microsoft Word (.docx)' },
              { text: 'Microsoft Word 97-2003(.doc)' },
              { text: 'Download as PDF' }
          ]
      }
  ];
  public fileSettings: FileMenuSettingsModel = {
      menuItems: this.fileOptions,
      showItemOnClick: true,
      visible: true
  };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RibbonModule, RibbonFileMenuService } from "@syncfusion/ej2-angular-ribbon";
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, RibbonModule ], // Registering EJ2 Ribbon Module.
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ RibbonFileMenuService ]
  })
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<ejs-ribbon id="ribbon" [fileMenu]='fileSettings'>
  <e-ribbon-tabs>
      <e-ribbon-tab header="Home">
          <e-ribbon-groups>
              <e-ribbon-group header="Clipboard">
                  <e-ribbon-collections>
                      <e-ribbon-collection>
                          <e-ribbon-items>
                              <e-ribbon-item type="Button" [buttonSettings]="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-items>
                      </e-ribbon-collection>
                  </e-ribbon-collections>
              </e-ribbon-group>
          </e-ribbon-groups>
      </e-ribbon-tab>
  </e-ribbon-tabs>
</ejs-ribbon>

Custom header text

You can define the file menu header text content by using the text property.

app.component.ts
app.module.ts
main.ts
app.component.html
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, FileMenuSettingsModel } from '@syncfusion/ej2-angular-ribbon';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public pasteButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paste", content: "Paste" };
  public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
  public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
  public fileSettings: FileMenuSettingsModel = {
      text: 'App',
      menuItems: [{ text: "New", iconCss: "e-icons e-file-new", id: "new" }],
      visible: true
  };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RibbonModule, RibbonFileMenuService } from "@syncfusion/ej2-angular-ribbon";
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, RibbonModule ], // Registering EJ2 Ribbon Module.
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ RibbonFileMenuService ]
  })
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<ejs-ribbon id="ribbon" [fileMenu]='fileSettings'>
  <e-ribbon-tabs>
      <e-ribbon-tab header="Home">
          <e-ribbon-groups>
              <e-ribbon-group header="Clipboard">
                  <e-ribbon-collections>
                      <e-ribbon-collection>
                          <e-ribbon-items>
                              <e-ribbon-item type="Button" [buttonSettings]="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-items>
                      </e-ribbon-collection>
                  </e-ribbon-collections>
              </e-ribbon-group>
          </e-ribbon-groups>
      </e-ribbon-tab>
  </e-ribbon-tabs>
</ejs-ribbon>

File Menu

Visibility

Adding menu items

Open submenu on click

Custom header text