Enable disable toolbar item in Angular File manager component

27 Sep 20234 minutes to read

The toolbar items can be enabled/disabled by specifying the items in enableToolbarItems or disableToolbarItems methods respectively.

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

import { Component, ViewChild } from '@angular/core';
import { FileManager } from '@syncfusion/ej2-filemanager';

@Component({
    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 { AppComponent } from './app.component';
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';

@NgModule({
imports: [FileManagerModule, BrowserModule, ButtonModule],
    declarations: [AppComponent],
    providers:[ NavigationPaneService, ToolbarService, DetailsViewService],
    bootstrap: [AppComponent]
})
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);