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.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