JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 90
  • Score
    100M100P100Q65110F
  • License MIT

Monaco Editor for Angular

Package Exports

  • ngx-monaco

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-monaco) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngx-monaco

Monaco Editor for Angular

Install

$ npm install monaco-editor ngx-monaco

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

angular-cli.json

Add the following lines to the app assets array in .angular-cli.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; }'],
    template: `
        <monaco-editor></monaco-editor>
    `
})
export class AppComponent { }

Files

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

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

    onFileChange(file: File) {
        // 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 { }

License

MIT © Sam Verschueren