Search results

Enable/Disable Toolbar Item in Angular FileManager component

20 Apr 2021 / 1 minute 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.

Source
Preview
app.component.ts
app.module.ts
main.ts
app.component.html
app.component.css
Copied to clipboard
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"]);
        });
    }
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

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