ngx-monaco-tree
v18.2.0
Published
A tree view based on monaco-editor powered by VSCode.
Downloads
383
Maintainers
Readme
NgxMonacoTree
This is a Tree view based on monaco-editor and vscode on Angular.
Changelog
Current
- Update dependencies
18.1.0
- Upgrade to Angular 18
17.5.0
- Add default value (thank to matthieu-crouzet)
17.3.0
- Bug fix publish directory (thank to DustdevDM)
17.1.0
- Migrate to Angular 17
- Add color to files
- Add highlight on selected file or folder
- Add buttons to create file or folder, and collapse all folders
- Drag & Drop
15.2.0
- Migrate from yarn to pnpm
- Create a project with Angular 17 to test the compatibility
- Passing to standalone components
- CI/CD with Github Actions
15.1.1
- Add demo on stackblitz in README
15.1.0
- Fix theme in context menu
15.0.0
- Upgrade to Angular 15
14.0.0
- Upgrade to Angular 14
Features
- 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.ts
for example)
Demo
Stackblitz : ngx-monaco-tree-demo
Installation
Available on Angular ~~13, 14, 15,~~ 17, 18 or highter
Install it
npm i --save ngx-monaco-tree @vscode/codicons
yarn add ngx-monaco-tree @vscode/codicons
pnpm add ngx-monaco-tree @vscode/codicons
Edit 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>
Arguments
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];
Credits
monaco-editor vscode vscode-material-icon-theme monaco-tree
Acknowledgments
- matthieu-crouzet
- DustdevDM
License
MIT