@materia-ui/ngx-monaco-editor

Documentation

Try it out on : live demo.

Api reference available on : documentation.

Standard installation

Install from npm repository:

npm install monaco-editor@0.18.1 @materia-ui/ngx-monaco-editor --save

⚠️ For angular v8 monaco-editor < v0.19.0 must be used, so that typescript versions are compatible.

Add the glob to assets in angular.json (to make monaco-editor lib available to the app):

{
    ...
    "projects": {
      "YOUR_APP_NAME": {
          ...
          "architect": {
              "build": {
                ...
                "options": {
                    ...
                    "assets": [
                        { "glob": "**/*", "input": "node_modules/monaco-editor", "output": "assets/monaco-editor/" }
                    ],
                    ...
                }
                ...
              }
            }
            ...
        }
    },
    ...
}

Sample

Include MonacoEditorModule in Main Module and Feature Modules where you want to use the editor component.(eg: app.module.ts):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MonacoEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Create Editor options in component.(eg: app.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  editorOptions = {theme: 'vs-dark', language: 'javascript'};
  code: string = 'function x() {\nconsole.log("Hello world!");\n}';
  originalCode: string = 'function x() { // TODO }';
}

Include editor component in your html with options input and ngModel bindings (eg: app.component.html) or using ReactiveForm features.

<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>

Include diff-editor component in your html and use the following inputs: options, original and modified (eg: app.component.html).

<ngx-monaco-diff-editor [options]="editorOptions" [original]="originalCode" [modified]="code"></ngx-monaco-diff-editor>

Both components support all available monaco-editor options:

• EditorOptions: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html,
• DiffEditorOptions: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.idiffeditorconstructionoptions.html.

Configure default monaco-editor library path

You can configure the default path used to load the monaco-editor library.

It allows you to either change the localization of your local installed library or load the library from a remote resource.

Example load monaco-editor from a CDN:

⚠️ Warning: in this case you don't need to install monaco-editor.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MonacoEditorModule
  ],
  providers: [{
    provide: 'MONACO_PATH',
    useValue: 'https://unpkg.com/monaco-editor@0.18.1/min/vs'
  }],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Access editor instance

If you need to retrieve an editor instance you can do so by using angular ViewChild:

<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>

import { AfterViewInit, ViewChild } from '@angular/core';
export class AppComponent implements AfterViewInit {
  @ViewChild('ngx-monaco-editor', {static: false}) monacoEditorComponent: MonacoEditorComponent
  editorOptions = {theme: 'vs-dark', language: 'javascript'};
  code: string= 'function x() {\nconsole.log("Hello world!");\n}';
  ngAfterViewInit() {
    // Here you can access editor instance
     this.editor = this.monacoEditorComponent.editor;
    }
}

Access Monaco instance

If you need to retrieve monaco-editor instance for advance use cases (like defining a custom theme, add custom auto-complete support, etc...), you have to wait until monaco is loaded using our MonacoEditorLoaderService:

import { MonacoEditorLoaderService } from '@materia-ui/ngx-monaco-editor';
...
constructor(private monacoLoaderService: MonacoEditorLoaderService) {
      this.monacoLoaderService.isMonacoLoaded$.pipe(
        filter(isLoaded => isLoaded),
        take(1),
      ).subscribe(() => {
           // here, we retrieve monaco-editor instance
           this.monaco = ((window as any).monaco);
      });
     }

Motivations

We wanted to use monaco-editor library with angular in our desktop application: Materia Designer.

The current angular libraries did not cover all of our needs, notably:

• Works on Browser and Electron application,
• Support flex-box container and correctly resize editor when container size changes.