Monaco Editor for Angular
You can easily run the example locally.
$ npm install monaco-editor ngx-monaco
Note: The
monaco-editorpackage is a peer dependency of this package.
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.
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 { }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.
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 { }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.
- monaco-editor - A browser based code editor
MIT © Sam Verschueren
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent