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

@Component({
  imports: [FileManagerModule],
  providers: [NavigationPaneService, ToolbarService, DetailsViewService],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-filemanager 
    id='file-manager' 
    [ajaxSettings]='ajaxSettings' 
    height="500px">
  </ejs-filemanager>`
})
export class AppComponent {
  public ajaxSettings = {
    url: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations',
    getImageUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage',
    uploadUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload',
    downloadUrl: 'https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download'
  };
}

import { Component } from '@angular/core';
import { FileManagerModule } from '@syncfusion/ej2-angular-filemanager';
import { FileData } from '@syncfusion/ej2-filemanager';

@Component({
  imports: [FileManagerModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-filemanager 
    id='file-manager' 
    [fileSystemData]='fileData' 
    height="500px">
  </ejs-filemanager>`
})
export class AppComponent {
  public fileData: FileData[] = [
    {
      id: '1',
      name: 'Documents',
      isFile: false,
      hasChild: true,
      parentId: null,
      dateModified: new Date('2024-01-15')
    },
    {
      id: '2',
      name: 'Resume.pdf',
      isFile: true,
      hasChild: false,
      parentId: '1',
      size: 204800,
      dateModified: new Date('2024-01-10')
    }
  ];
}

// app.component.ts
ajaxSettings = {
  url: '/api/FileManager/FileOperations',
  getImageUrl: '/api/FileManager/GetImage',
  uploadUrl: '/api/FileManager/Upload',
  downloadUrl: '/api/FileManager/Download'
};

toolbarSettings = {
  items: ['NewFolder', 'Upload', 'Download', 'Delete', 'Refresh', 'View', 'Details']
};

fileData = this.apiService.getFiles().map(file => ({
  id: file.id,
  name: file.fileName,
  isFile: file.type === 'file',
  parentId: file.parentId || null,
  size: file.fileSize,
  dateModified: new Date(file.modified)
}));

// Inject VirtualizationService, enable enableVirtualization
providers: [VirtualizationService]

// In template
<ejs-filemanager 
  [enableVirtualization]="true"
  [view]="'Details'"
  ...>
</ejs-filemanager>

onDownloadSelected() {
  const selected = this.fileManager.selectedItems;
  // Download multiple files (server returns ZIP)
}

Do you have a backend file service? 
  ├─ YES → Use ajaxSettings (see Getting Started)
  │        └─ Need to handle 1000+ files?
  │            ├─ YES → Enable enableVirtualization
  │            └─ NO → Standard setup
  │
  └─ NO → Use fileSystemData with local JSON
           └─ Need to organize hierarchically?
               ├─ YES → Use nested items with parentId
               └─ NO → Use flat data structure