This is a Tree view based on monaco-editor and vscode on Angular.
- Update dependencies
- Upgrade to Angular 18
- Add default value (thank to matthieu-crouzet)
- Bug fix publish directory (thank to DustdevDM)
- 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
- Migrate from yarn to pnpm
- Create a project with Angular 17 to test the compatibility
- Passing to standalone components
- CI/CD with Github Actions
- Add demo on stackblitz in README
- Fix theme in context menu
- Upgrade to Angular 15
- Upgrade to Angular 14
- 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)
Stackblitz : ngx-monaco-tree-demo
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>
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