Virtualization in Angular File Manager component

12 Sep 20255 minutes to read

File Manager’s UI virtualization optimizes performance by dynamically loading only the visible files and directories in the viewport instead of rendering the entire collection at once. This significantly improves loading times and reduces memory consumption when handling large numbers of files and directories in both detailsView and largeIconsView.

Module Injection

To implement UI virtualization, import the VirtualizationService module in your AppModule and inject it into the provider section as follows:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FileManagerComponent, VirtualizationService } from '@syncfusion/ej2-angular-filemanager';

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [VirtualizationService]
})
export class AppModule { }

Enable Virtualization

The File Manager’s virtualization feature dynamically renders items based on the current viewport dimensions. As users scroll through content in either largeIconsView or detailsView, only the visible items are loaded, while others are rendered on demand.

To enable virtualization, set the enableVirtualization property to true. This is especially recommended when working with directories containing hundreds or thousands of files.

Implementation Example

The following example demonstrates virtualization with a large collection of files in the ‘Documents’ and ‘Text Documents’ folders:

app.component.ts

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService, VirtualizationService } from '@syncfusion/ej2-angular-filemanager'
import { Component, ViewEncapsulation } from '@angular/core';
/**
 * File Manager virtualization feature sample
 */

@Component({
    imports: [FileManagerModule,],
    standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    templateUrl: './default.html',
    encapsulation: ViewEncapsulation.None,
    providers: [NavigationPaneService, ToolbarService, DetailsViewService, VirtualizationService]
})

export class AppComponent {
    public ajaxSettings?: object;
    public view?: string;
    public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
    public ngOnInit(): void {
        this.ajaxSettings = {
            url: this.hostUrl + 'api/Virtualization/FileOperations',
            getImageUrl: this.hostUrl + 'api/Virtualization/GetImage',
            uploadUrl: this.hostUrl + 'api/Virtualization/Upload',
            downloadUrl: this.hostUrl + 'api/Virtualization/Download'
        };
        this.view = "Details";
    }

    onBeforeSend(args: any) {
        args.ajaxSettings.beforeSend = function (args: any) {
            args.httpRequest.setRequestHeader('Authorization', 'FileBrowser');
        };
    }
    beforeImageLoad(args: any) {
        args.imageUrl = args.imageUrl + '&rootName=' + 'FileBrowser';
    }
    beforeDownload(args: any) {
        args.data.rootFolderName = 'FileBrowser';
    }
}

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

When to Use Virtualization

Virtualization is particularly beneficial in the following scenarios:

• File systems with hundreds or thousands of files in a single directory
• Applications where File Manager needs to load quickly without performance degradation
• Environments with limited memory resources where rendering large collections could impact performance

Limitations for Virtualization

When implementing virtualization in the File Manager, be aware of these limitations:

• Programmatic selection using the selectAll method is not supported with virtual scrolling.

• The keyboard shortcut CTRL+A will only select the files and directories that are currently visible within the viewport, rather than selecting all files and directories in the entire directory tree.

• Selected file items are not maintained while scrolling to optimize component performance.