Awesome
@ngstack/code-editor
Code editor component for Angular applications.
Based on the Monaco editor that powers VS Code.
<a href="https://www.buymeacoffee.com/denys" target="_blank"> <img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="51" width="217"> </a>Installing
npm install @ngstack/code-editor
Integrating with Standalone Angular Project
Update the app.config.ts
file to provide the code editor configuration:
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideAnimationsAsync(),
// Configure Code Editor
provideCodeEditor({
// editorVersion: '0.46.0',
// use local Monaco installation
baseUrl: 'assets/monaco',
// use local Typings Worker
typingsWorkerUrl: 'assets/workers/typings-worker.js'
})
]
};
Integrating with Modules-based Angular Project
Import CodeEditorModule
into your main application module:
import { provideCodeEditor } from '@ngstack/code-editor';
@NgModule({
providers: [provideCodeEditor()]
})
export class AppModule {}
If you want to use a specific version of the Monaco editor, use editorVersion
parameter.
If not provided, the component is always going to use the latest
version.
For a full list of Monaco versions and changes, please refer to the official CHANGELOG.md file
import { provideCodeEditor } from '@ngstack/code-editor';
@NgModule({
providers: [
provideCodeEditor({
editorVersion: '0.44.0'
})
]
})
export class AppModule {}
Update template to use the ngs-code-editor
:
<ngs-code-editor [theme]="theme" [codeModel]="model" [options]="options" (valueChanged)="onCodeChanged($event)"></ngs-code-editor>
Update component controller class and provide corresponding properties and events:
export class AppComponent {
theme = 'vs-dark';
model: CodeModel = {
language: 'json',
uri: 'main.json',
value: '{}'
};
options = {
contextmenu: true,
minimap: {
enabled: true
}
};
onCodeChanged(value) {
console.log('CODE', value);
}
}
Input Properties
Name | Type | Default Value | Description |
---|---|---|---|
theme | string | vs | Editor theme. Supported values: vs , vs-dark or hc-black . |
options | Object | {...} | Editor options. |
readOnly | boolean | false | Toggles readonly state of the editor. |
codeModel | CodeModel | Source code model. |
The codeModel
property holds the value that implements the CodeModel
interface:
export interface CodeModel {
language: string;
value: string;
uri: string;
dependencies?: Array<string>;
schemas?: Array<{
uri: string;
schema: Object;
}>;
}
Editor Options
For available options see IEditorConstructionOptions docs.
The following options are used by default when Editor Component gets created:
{
"lineNumbers": true,
"contextmenu": false,
"minimap": {
"enabled": false
}
}
Output Events
Name | Argument Type | Description |
---|---|---|
loaded | Raised when editor finished loading all its components. | |
valueChanged | string | An event emitted when the text content of the model have changed. |
modelContentChanged | IModelContentChangedEvent | An event emitted when the contents of the underlying editor model have changed |
codeModelChanged | CodeModelChangedEvent | An event emitted when the code model value is changed. |
Component API
Name | Description |
---|---|
editor | returns the instance of the underlying Monaco ICodeEditor |
runAction(id, args) | runs the editor actions, for example editor.action.formatDocument |
formatDocument() | shortcut function to format the document |
Editor Service
The component comes with a separate CodeEditorService
service that provides additional APIs for the underlying monaco
editor:
Name | Description |
---|---|
monaco | get the global monaco instance |
typingsLoaded | An event emitted when code typings are loaded |
loaded | An event emitted when the monaco instance is loaded |
setTheme(themeName) | Switches to a theme |
Typings
The editor is able to resolve typing libraries when set to the Typescript
or Javascript
language.
Use dependencies
property to provide a list of libraries to resolve
<ngs-code-editor [codeModel]="model"> </ngs-code-editor>
And in the controller class:
export class MyEditorComponent {
codeModel: CodeModel = {
language: 'typescript',
uri: 'main.ts',
value: '',
dependencies: ['@types/node', '@ngstack/translate', '@ngstack/code-editor']
};
}
Run your application, it may take a few seconds to resolve dependencies. It is performed in the background (web worker), so you can type your code.
Try pasting the following snippet at runtime:
import { TranslateModule, TranslateService } from '@ngstack/translate';
import { CodeEditorModule } from '@ngstack/code-editor';
import * as fs from 'fs';
export class MyClass {
constructor(translate: TranslateService) {}
}
You should have all the types resolved and auto-completion working.
JSON schemas
You can associate multiple schemas when working with JSON files.
<ngs-code-editor [codeModel]="model"></ngs-code-editor>
Provide the required schemas like in the example below.
export class MyEditorComponent {
codeModel: CodeModel = {
language: 'json',
uri: 'main.json',
value: '{ "test": true }',
schemas: [
{
uri: 'http://custom/schema.json',
schema: {
type: 'object',
properties: {
type: {
enum: ['button', 'textbox']
}
}
}
}
]
};
}
The schemas get automatically installed and associated with the corresponding file.
Accessing Code Editor Instance
You can access the Code Editor component instance API from other components when using with the @ViewChild
:
class MyComponent {
private _codeEditor: CodeEditorComponent;
@ViewChild(CodeEditorComponent, { static: false })
set codeEditor(value: CodeEditorComponent) {
this._codeEditor = value;
}
get codeEditor(): CodeEditorComponent {
return this._codeEditor;
}
}
The code above allows you to use the code editor within the *ngIf
, for example:
<ng-container *ngIf="selectedModel">
<ngs-code-editor [codeModel]="selectedModel"></ngs-code-editor>
</ng-container>
Other components can now have access to the editor instance:
<button mat-icon-button title="Format code" (click)="codeEditor?.formatDocument()">
<mat-icon>format_align_left</mat-icon>
</button>
Example: auto-formatting on load
<ngs-code-editor [codeModel]="selectedModel" [options]="options" (codeModelChanged)="onCodeModelChanged($event)"></ngs-code-editor>
import { CodeModelChangedEvent } from '@ngstack/code-editor';
class MyComponent {
onCodeModelChanged(event: CodeModelChangedEvent) {
setTimeout(() => {
event.sender.formatDocument();
}, 100);
}
}
Offline Setup
Editor
You can run the editor in the offline mode with your Angular CLI application using the following steps:
Install the monaco-editor
:
npm install monaco-editor
Update the angular.json
file and append the following asset rule:
{
"glob": "**/*",
"input": "../node_modules/monaco-editor/min",
"output": "./assets/monaco"
}
Update the main application module and setup the service to use the custom baseUrl
when application starts:
import { provideCodeEditor } from '@ngstack/code-editor';
@NgModule({
providers: [
provideCodeEditor({
baseUrl: 'assets/monaco'
})
]
})
export class AppModule {}
Typings Worker
Update the angular.json
file and append the following asset rule:
{
"glob": "**/*.js",
"input": "../node_modules/@ngstack/code-editor/workers",
"output": "./assets/workers"
}
Then update the CodeEditorService
configuration at the application startup:
import { provideCodeEditor } from '@ngstack/code-editor';
@NgModule({
providers: [
provideCodeEditor({
typingsWorkerUrl: 'assets/workers/typings-worker.js'
})
]
})
export class AppModule {}
Lazy Loading
To enable Lazy Loading
use CodeEditorModule.forRoot()
in the main application,
and CodeEditorModule
in all lazy-loaded feature modules.
For more details please refer to Lazy Loading Feature Modules