# @ngstack/code-editor > Code editor component for Angular applications. Latest version **9.0.0** (published 2024-11-06) · MIT license · 0 weekly downloads ## Install ```sh npm install @ngstack/code-editor pnpm add @ngstack/code-editor yarn add @ngstack/code-editor bun add @ngstack/code-editor ``` ## Health **Score 35/100 (D)** — status: maintenance-mode. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 9.0.0 | | Published | 2024-11-06 | | First published | 2018-03-26 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 161.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 130 | | Author | Denys Vuika | | Maintainers | denysvuika | | Keywords | angular, monaco, editor, code | ## Links - npm: https://www.npmjs.com/package/@ngstack/code-editor - Repository: https://github.com/ngstack/code-editor - Issues: https://github.com/ngstack/code-editor/issues - npm.io page: https://npm.io/package/@ngstack/code-editor ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^2.5.0 ## Alternatives - [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads - [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads - [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads - [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads - [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads ## Recent versions - 9.0.0 (latest) — 2024-11-06 - 8.0.0 — 2024-07-22 - 7.3.0 — 2024-07-22 - 7.2.0 — 2024-02-10 - 7.1.0 — 2024-02-08 - 7.0.1 — 2024-02-01 - 7.0.0 — 2024-01-27 - 6.0.0 — 2024-01-27 - 5.1.0 — 2023-09-20 - 5.0.0 — 2023-03-05 - 4.0.0 — 2022-04-14 - 3.1.0 — 2021-06-18 - 3.0.0 — 2021-01-30 - 2.1.1 — 2020-10-24 - 2.1.0 — 2020-08-27 - … 27 more at https://npm.io/package/@ngstack/code-editor/versions ## README # @ngstack/code-editor Code editor component for Angular applications. Based on the [Monaco](https://www.npmjs.com/package/monaco-editor) editor that powers [VS Code](https://github.com/Microsoft/vscode). Buy Me A Coffee ## Installing ```sh npm install @ngstack/code-editor ``` ## Integrating with Angular CLI project Import `CodeEditorModule` into your main application module: ```ts import { CodeEditorModule } from '@ngstack/code-editor'; @NgModule({ imports: [CodeEditorModule.forRoot()] }) 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. ```ts @NgModule({ imports: [ CodeEditorModule.forRoot({ editorVersion: '0.44.0' }) ] }) export class AppModule {} ``` Update template to use the `ngs-code-editor`: ```html ``` Update component controller class and provide corresponding properties and events: ```ts 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: ```ts export interface CodeModel { language: string; value: string; uri: string; dependencies?: Array; schemas?: Array<{ uri: string; schema: Object; }>; } ``` ### Editor Options For available options see [IEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorConstructionOptions.html) docs. The following options are used by default when Editor Component gets created: ```json { "lineNumbers": true, "contextmenu": false, "minimap": { "enabled": false } } ``` ## Output Events | Name | Argument Type | Description | | ------------ | ------------- | ------------------------------------------------------- | | loaded | | Raised when editor finished loading all its components. | | valueChanged | string | Raised after editor value gets changed. | ## 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 ```html ``` And in the controller class: ```ts 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: ```typescript 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. ```html ``` Provide the required schemas like in the example below. ```ts 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. ## 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`: ```sh npm install monaco-editor ``` Update the `angular.json` file and append the following asset rule: ```json { "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: ```ts import { CodeEditorModule, CodeEditorService } from '@ngstack/code-editor'; @NgModule({ ..., imports: [ ..., CodeEditorModule.forRoot({ baseUrl: 'assets/monaco' }) ], ... }) export class AppModule {} ``` ### Typings Worker Update the `angular.json` file and append the following asset rule: ```ts { "glob": "**/*.js", "input": "../node_modules/@ngstack/code-editor/workers", "output": "./assets/workers" } ``` Then update the `CodeEditorService` configuration at the application startup: ```ts @NgModule({ ..., imports: [ ..., CodeEditorModule.forRoot({ typingsWorkerUrl: 'assets/workers/typings-worker.js' }) ], ... }) export class AppModule {} ``` ## Lazy Loading To enable Lazy Loading use `CodeEditorModule.forRoot()` in the main application, and `CodeEditorModule.forChild()` in all lazy-loaded feature modules. For more details please refer to [Lazy Loading Feature Modules](https://angular.io/guide/lazy-loading-ngmodules) --- _Source: https://npm.io/package/@ngstack/code-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._