Customize Navigation Pane in Angular File Manager Component

18 Nov 20182 minutes to read

The navigation pane in the File Manager Component displays the folder hierarchy in a tree-like structure. You can customize the layout of each folder node in the navigation pane using the navigationPaneTemplate property. This allows you to modify the appearance of folders based on your application’s requirements.

You may use this template to show additional metadata, custom icons, or other UI elements alongside the folder name.

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager'
import { Component } from '@angular/core';

@Component({
    imports: [FileManagerModule,],
    providers: [NavigationPaneService, ToolbarService, DetailsViewService],
    standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: `<ejs-filemanager id='file-manager' [ajaxSettings]='ajaxSettings' height="375px">
    <ng-template #navigationPaneTemplate let-data>
        <div class="e-nav-pane-node" style="display:inline-flex; align-items:center;">
            <span class="folder-name" style="margin-left:8px;"></span>
        </div>
    </ng-template>
</ejs-filemanager>`
})

export class AppComponent {
    public ajaxSettings?: object;
    public hostUrl: string = 'https://physical-service.syncfusion.com/';
    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'
        };
    };
}
@import "node_modules/@syncfusion/ej2-material3-theme/styles/file-manager/index.css";
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));