Enable/Disable toolbar item in Angular File Manager component

10 Jan 20254 minutes to read

Toolbar items can be enabled or disabled by specifying them in the enableToolbarItems or disableToolbarItems methods respectively.

The following example shows enabling and disabling toolbar items on button click.

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"]);
        });
    }
}
@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';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));