This is a Tree view based on monaco-editor and vscode on Angular.
See CHANGELOG.md
- Folder and file management
- Dark or Light theme
- Icon files based on Materiel Icon (vscode-material-icon-theme)
- Auto Matching between file ou folder name and icon
- Event on click with path (click to app.module.ts trigger an event with path information (
src/app/app.module.tsfor example)
Stackblitz : ngx-monaco-tree-demo
Available on Angular 13, 14, 15, 17, 18 or highter
Install it
npm i --save ngx-monaco-tree @vscode/codiconsyarn add ngx-monaco-tree @vscode/codiconspnpm add ngx-monaco-tree @vscode/codiconsEdit your angular.json to add icons
...
assets: [
...
{
"glob": "**/*",
"input": "node_modules/ngx-monaco-tree/assets",
"output": "/assets/"
}
]
styles: [
...
"node_modules/@vscode/codicons/dist/codicon.css"
]
...Import directly in your module or component
import {NgxMonacoTreeComponent} from "./ngx-monaco-tree.component";
@NgModule({
...
imports: [
...
NgxMonacoTreeComponent,
],
})
export class AppModule {
}In your app.component.ts
tree: [
{
name: ".vscode",
content: [{ name: "settings.json" }],
},
{
name: "src",
content: [
{
name: "app",
content: [
{ name: "app.component.html" },
{ name: 'app.component.css', color: 'gray' },
{ name: 'app.component.spec.ts', color: 'yellow' },
{ name: 'app.component.ts', color: 'green' },
{ name: 'app.module.ts', color: 'red' },
],
},
{
name: "assets",
content: [{ name: ".gitkeep" }],
},
{
name: "environments",
content: [{ name: "environment.prod.ts" }, { name: "environment.ts" }],
},
{
name: "favicon.ico",
},
{
name: "index.html",
},
{
name: "main.ts",
},
{
name: "polyfill.ts",
},
{
name: "styles.css",
},
],
},
{
name: "angular.json",
},
{
name: "package-lock.json",
},
{
name: "package.json",
},
{
name: "tsconfig.json",
},
];In your html
<monaco-tree [tree]="tree"></monaco-tree>List of arguments
| name | type | default | description |
|---|---|---|---|
| tree | MonacoTreeElement | [] |
Tree view of your file system |
| theme | vs-dark / vs-light |
vs-dark |
Theme light or dark |
| height | string | 500px |
Height of MonacoTree |
| width | string | 300px |
Width of MonacoTree |
| currentFile | string | `` | Default file opened |
List of events
| name | arguments | description |
|---|---|---|
| clickFile | path: string | callback to invoke when file or folder is clicked |
| clickContextMenu | action: ContextMenuAction | callback to invoke when element in context menu is clicked |
| dragDropFile | action: DragAndDropEvent | callback to invoke when file or folder is dragged and dropped |
Note :
type MonacoTreeElement = {
name: string;
content?: MonacoTreeElement[],
color?: 'red'|'yellow'|'green'|'gray'|string
}
type ContextMenuAction = ['new_file'|'new_directory'|'delete_file'|'rename_file', string];monaco-editor vscode vscode-material-icon-theme monaco-tree
- matthieu-crouzet
- DustdevDM
MIT