Adding custom item to toolbar in Angular File Manager component

12 Sep 20256 minutes to read

The File Manager component allows you to customize the toolbar by modifying existing items or adding new custom items to enhance functionality according to your application requirements.

Customizing the toolbar items

You can modify the items displayed in the toolbar by using 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.

The following example demonstrates how to:

1. Modify the default New Folder item by changing its properties
2. Add a custom checkbox item to the toolbar using the template property

app.component.ts

import { BrowserModule } from '@angular/platform-browser'
import { NgModule, ViewEncapsulation } from '@angular/core'
import { FileManagerAllModule, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager'
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons'
import { Component, ViewChild } from '@angular/core';
import { FileManagerComponent } from '@syncfusion/ej2-angular-filemanager';
import { CheckBoxComponent, ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';

@Component({
    imports: [FileManagerAllModule, CheckBoxModule],
    providers: [NavigationPaneService, ToolbarService, DetailsViewService],
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: `<ejs-filemanager id='files' #fileManager [ajaxSettings]='ajaxSettings' height="375px" >
            <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($event)"></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;
    @ViewChild('checkbox')
    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';
        }
    };
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import 'node_modules/@syncfusion/ej2-grids/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-filemanager/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));