Enable disable toolbar item in Angular File manager component

19 Sep 20224 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.

app.component.ts

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

@Component({
    selector: 'app-root',
    styleUrls: ['app/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 = "330px";
       };
    onCreated(args: any) {
        // Click event for enable button
        document.getElementById("enable").addEventListener('click', (event) => {
            // Enable new folder toolbar item
            this.fileManagerInstance.enableToolbarItems(["newfolder"]);
        });
        // Click event for disable button
        document.getElementById("disable").addEventListener('click', (event) => {
            // Disable new folder toolbar item
            this.fileManagerInstance.disableToolbarItems(["newfolder"]);
        });
    }
}

app.module.ts

import { AppComponent } from './app.component';
import { HttpModule, JsonpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import 'rxjs/add/operator/map';
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 , HttpModule, JsonpModule, BrowserModule, ButtonModule],
declarations: [AppComponent],
providers:[ NavigationPaneService, ToolbarService, DetailsViewService],
bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);