Adding custom item to context menu in Angular File Manager component

10 Sep 20255 minutes to read

The File Manager component allows you to customize the default context menu by adding new menu items, controlling visibility, and handling click events. This customization is especially useful when you need to implement application-specific actions in the File Manager interface.

Overview of context menu customization

You can customize the context menu using three key API elements:

• contextMenuSettings - Configure custom menu items and their visibility
• menuOpen - Triggered before the context menu opens, allowing dynamic customization
• menuClick - Triggered when any context menu item is clicked, enabling custom action handling

Adding a custom context menu item

The following example demonstrates how to add a custom item to the context menu and handle its click event:

The contextMenuSettings is used to add a new menu item. The menuOpen event is used to add the icon to the new menu item. The menuClick event is used to add an event handler to the new menu item.

app.component.ts

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager'
import { Component } from '@angular/core';
import { MenuOpenEventArgs, MenuClickEventArgs } from '@syncfusion/ej2-filemanager';

@Component({
    imports: [FileManagerModule,],
    providers: [NavigationPaneService, ToolbarService, DetailsViewService],
    standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: `<ejs-filemanager id='filemanager' [ajaxSettings]='ajaxSettings' [contextMenuSettings]='contextMenuSettings' (menuOpen)='menuOpen($event)' (menuClick)='menuClick($event)' height="375px">
    </ejs-filemanager>`
})
export class AppComponent {
    public ajaxSettings?: object;
    public contextMenuSettings?: object;
    public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
    public ngOnInit(): void {
        this.ajaxSettings = {
            url: this.hostUrl + 'api/FileManager/FileOperations',
            getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
            uploadUrl: this.hostUrl + 'api/FileManager/Upload',
            downloadUrl: this.hostUrl + 'api/FileManager/Download'
        };
        this.contextMenuSettings = {
            file: ['Custom', 'Open', '|', 'Delete', 'Rename', '|', 'Details'],
            folder: ['Custom', 'Open', '|', 'Delete', 'Rename', '|', 'Details', 'Custom'],
            layout: ['Custom', 'SortBy', 'View', 'Refresh', '|', 'NewFolder', 'Upload', '|', 'Details', '|', 'SelectAll'],
            visible: true
        };
    }
    menuOpen(args: MenuOpenEventArgs | any) {
        for (var i = 0; i < args.items.length; i++) {
            if (args.items[i].text === 'Custom') {
                args.items[i].iconCss = 'e-icons e-fe-tick';
            }
        }
    }

    // event for custom menu item
    menuClick(args: MenuClickEventArgs | any) {
        if (args.item.text === 'Custom') {
            alert('You have clicked custom menu item')
        }
    }
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import 'node_modules/@syncfusion/ej2-grids/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-filemanager/styles/material.css';

main.ts

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