ngx-monaco

Monaco Editor for Angular

You can easily run the example locally.

Install

$ npm install monaco-editor ngx-monaco

Note: The monaco-editor package is a peer dependency of this package.

angular.json

Add the following lines to the app assets array in angular.json.

{
	"glob": "**/*",
	"input": "./node_modules/monaco-editor/min/vs",
	"output": "libs/vs"
}

Because of some technical reasons, it's not possible to package the monaco-editor together with all the other packages. This module will dynamically load and instantiate the monaco editor.

Usage

Import the MonacoEditorModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MonacoEditorModule } from 'ngx-monaco';

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

Now you're ready to render the editor on your screen.

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

@Component({
	selector: 'app-root',
	styles: ['monaco-editor { height: 500px; display:block; }'],
	template: `
		<monaco-editor></monaco-editor>
	`
})
export class AppComponent { }

Files

import { Component } from '@angular/core';
import { MonacoFile } from 'ngx-monaco';

@Component({
	selector: 'app-root',
	styles: ['monaco-editor { height: 500px; display:block; }'],
	template: `
		<monaco-editor
			theme="vs-dark"
			[file]="file"
			(fileChange)="onFileChange($event)">
		</monaco-editor>
	`
})
export class AppComponent {
	file: MonacoFile = {
		uri: 'index.js',
		language: 'javascript',
		content: `console.log('hello world');`
	};

	onFileChange(file: MonacoFile) {
		// Handle file change
	}
}

You can use the (fileChange) event to listen to changes in the file.

Completion providers

The completion item provider interface defines the contract between extensions and the IntelliSense.

import { Injectable } from '@angular/core';
import { CompletionItemProvider } from 'ngx-monaco';

@Injectable()
export class TravisCompletionProvider implements CompletionItemProvider {
	get language() {
		return 'yaml';
	}

	provideCompletionItems(model: monaco.editor.IReadOnlyModel): any {
		const filename = model.uri.path.split('/').pop();

		if (filename !== '.travis.yaml') {
			return [];
		}

		return [
			{
				label: 'language',
				kind: monaco.languages.CompletionItemKind.Property,
				documentation: 'Set the language',
				insertText: 'language: '
			}
		]
	}
}

You can play around with completion providers in the Monaco Playground.

Register the completion provider in your module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MonacoEditorModule, COMPLETION_PROVIDERS } from 'ngx-monaco';

import { TravisCompletionProvider } from './providers/travis-completion.provider';

@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		BrowserModule,
		MonacoEditorModule.forRoot()
	],
	providers: [
		{ provide: COMPLETION_PROVIDERS, useClass: TravisCompletionProvider, multi: true }
	]
	bootstrap: [AppComponent]
})
export class AppModule { }

Development

Run the example locally. Make changes directly in the src directory and start the example again. It will automatically build the library before it starts the application.

Related

• monaco-editor - A browser based code editor

License

MIT © Sam Verschueren