NgxMonacoTree

This is a Tree view based on monaco-editor and vscode on Angular.

Changelog

See CHANGELOG.md

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.tsfor example)

Demo

Stackblitz : ngx-monaco-tree-demo

Installation

Available on Angular 13, 14, 15, 17, 18 or highter

Install it

1npm i --save ngx-monaco-tree @vscode/codicons

1yarn add ngx-monaco-tree @vscode/codicons

1pnpm add ngx-monaco-tree @vscode/codicons

Edit your angular.json to add icons

1...
2assets: [
3	...
4	{
5		"glob": "**/*",
6		"input": "node_modules/ngx-monaco-tree/assets",
7		"output": "/assets/"
8	}
9]
10styles: [
11	...
12	"node_modules/@vscode/codicons/dist/codicon.css"
13]
14...

Import directly in your module or component

1import {NgxMonacoTreeComponent} from "./ngx-monaco-tree.component";
2
3@NgModule({
4  ...
5    imports: [
6        ...
7        NgxMonacoTreeComponent,
8    ],
9})
10
11export class AppModule {
12}

In your app.component.ts

1tree: [
2  {
3    name: ".vscode",
4    content: [{ name: "settings.json" }],
5  },
6  {
7    name: "src",
8    content: [
9      {
10        name: "app",
11        content: [
12          { name: "app.component.html" },
13          { name: 'app.component.css', color: 'gray' },
14          { name: 'app.component.spec.ts', color: 'yellow' },
15          { name: 'app.component.ts', color: 'green' },
16          { name: 'app.module.ts', color: 'red' },
17        ],
18      },
19      {
20        name: "assets",
21        content: [{ name: ".gitkeep" }],
22      },
23      {
24        name: "environments",
25        content: [{ name: "environment.prod.ts" }, { name: "environment.ts" }],
26      },
27      {
28        name: "favicon.ico",
29      },
30      {
31        name: "index.html",
32      },
33      {
34        name: "main.ts",
35      },
36      {
37        name: "polyfill.ts",
38      },
39      {
40        name: "styles.css",
41      },
42    ],
43  },
44  {
45    name: "angular.json",
46  },
47  {
48    name: "package-lock.json",
49  },
50  {
51    name: "package.json",
52  },
53  {
54    name: "tsconfig.json",
55  },
56];

In your html

1<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 :

1type MonacoTreeElement = {
2	name: string;
3	content?: MonacoTreeElement[],
4  color?: 'red'|'yellow'|'green'|'gray'|string
5}
6
7type 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