Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
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/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;
}