Enable or Disable Toolbar Items in Angular File Manager

10 Sep 20254 minutes to read

The File Manager component allows you to dynamically control the availability of toolbar items by enabling or disabling them based on your application requirements. This functionality helps you manage user permissions, implement contextual actions, and create a more intuitive user interface.
You can programmatically enable or disable specific toolbar items using the following methods:

• enableToolbarItems: Enables specified toolbar items
• disableToolbarItems: Disables specified toolbar items

These methods accept an array of toolbar item names as strings.

The following example demonstrates how to enable and disable specific toolbar items when clicking buttons:

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 { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, ViewChild } from '@angular/core';
import { FileManager } from '@syncfusion/ej2-filemanager';

@Component({
    imports: [FileManagerModule, ButtonModule],
    providers: [NavigationPaneService, ToolbarService, DetailsViewService],
    standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: ` <button ejs-button id="enable" cssClass="e-success">Enable New Folder toolbar item</button>
                <button ejs-button id="disable" cssClass="e-danger">Disable New Folder toolbar item</button>
                <br />
                <br />
                <ejs-filemanager id='file-manager' #fileManager [ajaxSettings]='ajaxSettings' [height]='height' (created)='onCreated($event)'  >
                </ejs-filemanager>`
})
export class AppComponent {
    @ViewChild('fileManager')
    public fileManagerInstance?: FileManager;
    public ajaxSettings?: object;
    public height?: number;
    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.height = 330;
    };
    onCreated(args: any) {
        // Click event for enable button
        (document.getElementById("enable") as HTMLElement).addEventListener('click', (event) => {
            // Enable new folder toolbar item
            (this.fileManagerInstance as FileManager).enableToolbarItems(["newfolder"]);
        });
        // Click event for disable button
        (document.getElementById("disable") as HTMLElement).addEventListener('click', (event) => {
            // Disable new folder toolbar item
            (this.fileManagerInstance as FileManager).disableToolbarItems(["newfolder"]);
        });
    }
}

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';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/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));