![Oracle Drags Its Feet in the JavaScript Trademark Dispute](https://cdn.sanity.io/images/cgdhsj6q/production/919c3b22c24f93884c548d60cbb338e819ff2435-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
@ngstack/code-editor
Advanced tools
Code editor component for Angular applications.
Based on the Monaco editor that powers VS Code.
npm install @ngstack/code-editor
Import CodeEditorModule
into your main application module:
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.
@NgModule({
imports: [
CodeEditorModule.forRoot({
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);
}
}
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;
}>;
}
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
}
}
Name | Argument Type | Description |
---|---|---|
loaded | Raised when editor finished loading all its components. | |
valueChanged | string | Raised after editor value gets changed. |
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.
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.
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 { CodeEditorModule, CodeEditorService } from '@ngstack/code-editor';
@NgModule({
...,
imports: [
...,
CodeEditorModule.forRoot({
baseUrl: 'assets/monaco'
})
],
...
})
export class AppModule {}
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:
@NgModule({
...,
imports: [
...,
CodeEditorModule.forRoot({
typingsWorkerUrl: 'assets/workers/typings-worker.js'
})
],
...
})
export class AppModule {}
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
FAQs
Code editor component for Angular applications.
We found that @ngstack/code-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.