Search results

Enable/Disable Toolbar Item in Angular FileManager component

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.

Source
Preview
app.component.ts
app.module.ts
main.ts
app.component.html
app.component.css
import { Component, ViewChild } from '@angular/core';
import { FileManager } from '@syncfusion/ej2-filemanager';

@Component({
    selector: 'app-root',
    styleUrls: ['app/app.component.css'],
    templateUrl: 'app/app.component.html'
})
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"]);
        });
    }
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<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>
#enable {
    position: relative;
    left: 20%;
    top: 5px;
}

#disable {
    position: relative;
    left: 30%;
    top: 5px;
}