Adding custom item to toolbar in Angular File manager component

27 Sep 20236 minutes to read

You can modify the items displayed in the toolbar by utilizing the toolbarItems API. To display both default and customized items, it’s essential to assign a unique name to each item. Additionally, you have the flexibility to alter the default items by adjusting properties such as tooltipText, iconCss, Text, suffixIcon and more. This level of customization allows you to tailor the toolbar to your specific requirements and design preferences. The names used in the code example below serve as unique identifiers for default toolbar items, while custom items can be assigned any unique name value to distinguish them from the defaults.

For instance, here’s an example of how to add a custom checkbox to the toolbar using the template property. Here we have modified the default New Folder item and added a custom toolbar item for selection.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import {FileManagerComponent} from '@syncfusion/ej2-angular-filemanager';
import { CheckBoxComponent, ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';

@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: `<ejs-filemanager id='files' #fileManager [ajaxSettings]='ajaxSettings' >
            <e-toolbaritems>
                <e-toolbaritem name= "NewFolder" text= "Create folder" prefixIcon= "e-plus" tooltipText= "Create folder" ></e-toolbaritem>
                <e-toolbaritem name= "Upload"></e-toolbaritem>
                <e-toolbaritem name= "SortBy"></e-toolbaritem>
                <e-toolbaritem name= "Refresh"></e-toolbaritem>
                <e-toolbaritem name= "Cut"></e-toolbaritem>
                <e-toolbaritem name= "Copy"></e-toolbaritem>
                <e-toolbaritem name= "Paste"></e-toolbaritem>
                <e-toolbaritem name= "Delete"></e-toolbaritem>
                <e-toolbaritem name= "Download"></e-toolbaritem>
                <e-toolbaritem name= "Rename"></e-toolbaritem>
                <e-toolbaritem name= "Select">
                    <ng-template #template>
                        <ejs-checkbox #checkbox label="Select All" [checked]="false" (change)="onChange()"></ejs-checkbox>
                    </ng-template>
                </e-toolbaritem>
                <e-toolbaritem name= "Selection"></e-toolbaritem>
                <e-toolbaritem name= "View"></e-toolbaritem>
                <e-toolbaritem name= "Details"></e-toolbaritem>
            </e-toolbaritems>
      </ejs-filemanager>`
})
export class AppComponent {
    @ViewChild('fileManager')
    public fileManagerInstance?: FileManagerComponent;
    public checkbox: CheckBoxComponent;
    public ajaxSettings?: 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'
        };
    };
    public onChange(args: ChangeEventArgs): void {
        if (args.checked) {
            (this.fileManagerInstance as FileManagerComponent).selectAll(); 
            (this.checkbox as CheckBoxComponent).label = 'Unselect All';
        }
        else {
          (this.fileManagerInstance as FileManagerComponent).clearSelection();
          (this.checkbox as CheckBoxComponent).label = 'Select All';
        }
    };
}

app.module.ts

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService  } from '@syncfusion/ej2-angular-filemanager';
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';

@NgModule({
    imports: [FileManagerModule, BrowserModule, CheckBoxModule],
    declarations: [AppComponent],
    providers:[ NavigationPaneService, ToolbarService, DetailsViewService],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);