1

2

Output event can be divided into different stages of feedback according to the type attribute. When you need to initialize init, you can program the editor in one step.

`ts
import { Component } from '@angular/core';
import { NuMonacoEditorEvent } from '@ng-util/monaco-editor';

@Component({
selector: 'app-root',
template: ,
})
export class DemoComponent {
value: string = 'const a = 1;';
editorOptions = { theme: 'vs-dark', language: 'javascript' };

showEvent(e: NuMonacoEditorEvent): void {
if (e.type === 'init') {
// doing
}
}
}
`

$3

provideNuMonacoEditorConfig accepts config of type NuMonacoEditorConfig.

`ts
provideNuMonacoEditorConfig({
baseUrl: , // The base URL to monaco editor library assets via AMD (RequireJS), Default: https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min
defaultOptions: {}, // Default options when creating editors
monacoLoad: (m) => {} // The event after the first loading of the monaco editor library is completed, use this function to extend monaco editor functionalities.
}),
`

#### Configure JSON Defaults

monacoLoad property of NuMonacoEditorConfig can be used to configure JSON default.

`ts
provideNuMonacoEditorConfig({
defaultOptions: { scrollBeyondLastLine: false },
monacoLoad: () => {
const uri = monaco.Uri.parse('a://b/foo.json');
monaco.json.jsonDefaults.setDiagnosticsOptions({
validate: true,
schemas: [
{
uri: 'http://myserver/foo-schema.json',
fileMatch: [uri.toString()],
schema: {
type: 'object',
properties: {
p1: {
enum: ['v1', 'v2'],
},
p2: {
$ref: 'http://myserver/bar-schema.json',
},
},
},
},
{
uri: 'http://myserver/bar-schema.json',
fileMatch: [uri.toString()],
schema: {
type: 'object',
properties: {
q1: {
enum: ['x1', 'x2'],
},
},
},
},
],
});
},
}),
`

Now pass model config of type NuMonacoEditorModel to Editor Component.

`ts
import { Component } from '@angular/core';
import { NuMonacoEditorEvent, NuMonacoEditorModel } from '@ng-util/monaco-editor';

@Component({
selector: 'app-demo',
template:

Format document
,
})
export class DemoComponent {
value = '{"p1":"a"}';
model: NuMonacoEditorModel;

showEvent(e: NuMonacoEditorEvent) {
if (e.type === 'init') {
this.model = {
language: 'json',
uri: monaco.Uri.parse('a://b/foo.json'),
};
}
}
}
`

API

$3

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| [placeholder] | Placeholder of monaco editor, Can change the style via defining the .monaco-editor-placeholder CSS. | string | - |
| [height] | Height of monaco editor, can be set auto | string | 200px |
| [maxHeight] | Max-height of monaco editor, when height set auto | string | 1000px |
| [disabled] | Disabled of monaco editor | boolean | false |
| [autoFormat] | Whether to automatically format the document | boolean | true |
| [options] | Default options when creating editors | monaco.editor.IStandaloneEditorConstructionOptions | - |
| [model] | Model of monaco editor | NuMonacoEditorModel | - |
| [delay] | Delay init monaco editor, unit: ms | number | 0 |
| (event) | Event callback | EventEmitter | - |

$3

| Property | Description | Type | Default |
|----------|-------------|------|---------|
| [height] | Height of monaco editor | string | 200px |
| [disabled] | Disabled of monaco editor | boolean | false |
| [options] | Default options when creating editors | monaco.editor.IStandaloneEditorConstructionOptions | - |
| [old] | Old model of monaco editor | NuMonacoEditorDiffModel | - |
| [new] | New model of monaco editor | NuMonacoEditorDiffModel | - |
| [delay] | Delay init monaco editor, unit: ms | number | 0 |
| (event) | Event callback | EventEmitter` | - |

$3

The MIT License (see the LICENSE file for the full text)