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

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