Code Editor

NG-ZORRO experiments are features that are released but not yet considered stable or production ready

Developers and users can opt-in into these features before they are fully released. But breaking changes may occur with any release.

When To Use#

When you want to use monaco editor in Angular.

Import Module#

import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor';

Import Style#

@import "node_modules/ng-zorro-antd/code-editor/style/entry.less"

Examples

The simplest usage.

expand codeexpand code
Loading...

Use diff editor mode.

expand codeexpand code
Loading...

Change Theme

You can change default options and options of existing editors at runtime.

expand codeexpand code
Loading...

Use full control mode and mangage TextModel of monaco editor by yourself.

expand codeexpand code
Loading...

Loading

A more complex demo with loading effect and toolkit.

expand codeexpand code
Loading...

API#

Install monaco-editor in your project first:

npm install monaco-editor

Dynamic Loading#

If you would like to load monaco dynamically (which means you load resources of monaco editor right before you would like to use it), you will need to register assets of monaco editor itself. You can do that by adding these lines in angular.json file:

"assets": [
+ {
+   "glob": "**/*",
+   "input": "./node_modules/monaco-editor/min/vs",
+   "output": "/assets/vs/"
+ }
],

If you deploy resources of monaco editor on CDN, you won't need to modify angular.json. Instead, you must configure the assetsRoot property via NzConfigService. For example, you put resources of monaco editor on https://mycdn.com/assets/vs, you should provide { assets: 'https://mycdn.com/assets/vs' }.

If you are going to use static loading (which we will explain in detail at the bottom of this page), you don't need to modify angular.json file.

Static Loading#

Sometimes you need to load AMD module dynamically. But since monaco editor's loader patches window[require], you can not use AMD loader like requireJS. In this situation you need to enable static loading.

With help of monaco-editor-webpack-plguin by Microsoft, you can do that in a convenient way.

  1. Provide the value of NZ_CONFIG in app.module and set useStaticLoading in the codeEditor property to true.
  2. Create a webpack.partial.js file, and config monaco-editor-webpack-loader.
  3. Use custom webpack loader like ngx-build-plus to load this webpack config.

If you use static loading, you should not add assets of monaco editor to your project by modifying angular.json file.

nz-code-editor#

ParameterDescriptionTypeDefault
[nzEditorMode]Mode of monaco editornormal|diffnormal
[nzLoading]Show the loading spinbooleanfalse
[nzOriginalText]The content of the left editor in diff modebooleanfalse
[nzFullControl]Enable full control mode. User should manage TextModel manually in this modebooleanfalse
[nzEditorOption]Please refer to the doc of monaco editorIEditorConstructionOptions{}
[nzToolkit]A placeholder for adding some quick actionsTemplateRef<void>-
(nzEditorInitialized)The event that a code editor is initializedIStandaloneCodeEditor | IStandaloneDiffEditor-

Methods#

MethodDescription
layout()Force monaco editor to re-render itself

Global Configuration#

You can set the default configuration of the CodeEditor component through the set method of NzConfigService.

CodeEditorConfig#

ParameterDescriptionTypeDefault
assetsRootWhere should the component load resource of monaco editorstring | SageUrl-
defaultEditorOptionDefault options. Please refer to the doc of monaco editorIEditorConstructionOptions{}
onLoadThe hook invoked when the resource of monaco editor is loaded. At this moment and afterwards the global variable monaco is usable() => void-
onFirstEditorInitThe hook invoked when the first monaco editor is initialized() => void-
onInitThe hook invoked every time a monaco editor is initialized() => void-
useStaticLoadingLoad monaco editor staticallybooleanfalse