NPM File Manager/File Explorer in angular project

[irfanr786]

Hello guys , I want to implement the file manger or file explorer like window in my angular project version 18
can you please suggest me the best and free npm which I can implement in my project.
I've tried the ngx-explorer but it contains issue in its UI like menu bar is not showing, no mulitselection is implemented in it etc

[httperror505]

1. angular-file-manager

Features:

• Supports multi-selection
• Multiple themes
• Easy to integrate and customize
• CRUD operations for files and folders

Installation: npm install angular-file-manager
Note: I recommend this.

2. angular-file-explorer

Features:

• File/folder view
• Multi-selection
• Search functionality

Installation: npm install angular-file-explorer --save
Issues: Still in development, but suitable for basic needs.

[irfanr786]

Hi,
Thank you for your reply can you please explain this with tutorial that how to implement it ?
Like I've tried to install it but Angular showing error

[httperror505]

1. Install it
   npm install angular-file-manager
2. Integrate it in the part where you want to put it. This is a sample code:
   ``import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AngularFileManagerModule } from 'angular-file-manager'; // Import the module

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AngularFileManagerModule // Add the module here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
3. Add the component in your app.component.html file.<angular-file-manager
[config]="config"
(onFileSelected)="onFileSelected($event)">

4. Put it in your app.component.ts.import { Component } from '@angular/core';

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
config = {
multiSelection: true, // Enable multi-selection
theme: 'light', // Use light theme (or you can set other themes)
fileOperations: ['create', 'rename', 'delete', 'move', 'copy'], // CRUD operations
// You can set other configuration properties as needed
};

onFileSelected(event: any) {
console.log('File selected:', event);
}
}
``