Search results

Adding Custom Item To Toolbar in Angular FileManager component

29 Nov 2022 / 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.

Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { ToolbarClickEventArgs , ToolbarCreateEventArgs} from '@syncfusion/ej2-filemanager';
import {FileManagerComponent} from '@syncfusion/ej2-angular-filemanager';

    selector: 'app-root',
    styleUrls: ['app/app.component.css'],
    templateUrl: 'app/app.component.html'
export class AppComponent {
    public fileManagerInstance: FileManagerComponent;
    public ajaxSettings: object;
    public toolbarSettings: object;
    public hostUrl: string = '';
    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 === +'_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';

    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';

Copied to clipboard
<ejs-filemanager id='files' #fileManager [ajaxSettings]='ajaxSettings' [toolbarSettings]='toolbarSettings'
          (toolbarClick)='toolbarClick($event)' (toolbarCreate)='toolbarCreate($event)'  >
Copied to clipboard
.e-fe-tick::before {
  content: '\e614';