ngx-explorer

Lightweight and easy-to-use Angular File Explorer module.
This is a front-end implementation only. There are no services at this point.

!explorer

See live Demo

Prerequisites

- Angular 17+

How to use

1. Install package
2. Provide IDataService implementation
3. Add to template
4. Styles

$3

``bash
npm i ngx-explorer
`

$3

Implement IDataService provider interface which contains API for fetching data from the server.

`Typescript
import { IDataService } from 'ngx-explorer';

export class MyDataService implements IDataService {
...
}
`

And provide the implementation:

`TypeScript
{ provide: DataService, useClass: ExampleDataService },
`

$3

Import components from ngx-explorer and provide in imports array in either module, main.ts or component.

`Typescript
imports: [ExplorerComponent],
`

and add tags to the template:

`html

`

See list of available components here

$3

- Add css import styles.scss:

`scss
@import 'ngx-explorer/src/assets/icons/css/nxe.css';
`

APIs

All the communication with the server is done through the ExplorerService APIs. It provides methods for fetching data, creating, renaming, deleting files and directories.

`Typescript
import { ExplorerService } from 'ngx-explorer';
...
constructor(private explorerService: ExplorerService) {

// start explorer by loading root level data
explorerService.openNode();

// subscribe to tree updates
explorerService.root$.subscribe((root) => {
console.log('Root:', root);
});
}
``

Customization

See Customization for more details.

Author

@artemnih