Search results

Adding Custom Item To Toolbar in Angular FileManager component

15 Oct 2021 / 1 minute to read

The toolbar items can be customized using the toolbarSettings API and toolbarClick events.

The following example shows adding a custom item in the toolbar.

The new toolbar button is added using toolbarSettings. The toolbarClick event is used to add an event handler to the new toolbar button.

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 { ToolbarClickEventArgs , ToolbarCreateEventArgs} from '@syncfusion/ej2-filemanager';
import {FileManagerComponent} from '@syncfusion/ej2-angular-filemanager';

@Component({
    selector: 'app-root',
    styleUrls: ['app/app.component.css'],
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    @ViewChild('fileManager')
    public fileManagerInstance: FileManagerComponent;
    public ajaxSettings: object;
    public toolbarSettings: object;
    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.toolbarSettings = {items: ['NewFolder', 'Custom', 'Upload', 'Delete', 'Download', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details']}
       };
    toolbarClick(args: ToolbarClickEventArgs) {
        if (args.item.text === 'Custom') {
            alert('You have clicked custom toolbar item')
        }
    }
    toolbarCreate(args: ToolbarCreateEventArgs) {
        for(var i=0;i<args.items.length;i++) {
            if(args.items[i].id === this.fileManagerInstance.element.id +'_tb_custom') {
                args.items[i].prefixIcon= 'e-icons e-fe-tick';
            }
        }
    }
}
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';

@NgModule({
    imports: [FileManagerModule , HttpModule, JsonpModule, BrowserModule],
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
<ejs-filemanager id='files' #fileManager [ajaxSettings]='ajaxSettings' [toolbarSettings]='toolbarSettings'
          (toolbarClick)='toolbarClick($event)' (toolbarCreate)='toolbarCreate($event)'  >
</ejs-filemanager>
Copied to clipboard
.e-fe-tick::before {
  content: '\e614';
}