File

editor/editor.component.ts

Description

Editor component for displaying and editing code

Based on the monaco editor (the same editor as in VS Code) Supports syntax highlighting for various languages (default: JSON) and can be extended with additional features like JSON schema validation

Implements

AfterViewInit OnDestroy ControlValueAccessor OnChanges

Metadata

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(zone: NgZone, themeSwitcher: ThemeSwitcherService)
Parameters :
Name Type Optional
zone NgZone No
themeSwitcher ThemeSwitcherService No

Inputs

editorOptions
Type : Monaco.editor.IStandaloneEditorConstructionOptions
Default value : {}

Options to pass to the monaco editor instance Allows to e.g. set a different language.

theme
Type : ThemeOptions | null

Overrides application theme. If not set, the theme will be taken from the theme switcher service.

Outputs

editorInit
Type : EventEmitter

Emits the editor instance once it is initialized Can be used to e.g. access the monaco instance and add a JSON schema for validation

Methods

Async ngAfterViewInit
ngAfterViewInit()
Returns : Promise<void>
ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
register
register()
Returns : void
registerOnChange
registerOnChange(fn: (value: string) => void)
Parameters :
Name Type Optional
fn function No
Returns : void
registerOnTouched
registerOnTouched(fn: () => void)
Parameters :
Name Type Optional
fn function No
Returns : void
setDisabledState
setDisabledState(isDisabled: boolean)
Parameters :
Name Type Optional
isDisabled boolean No
Returns : void
writeValue
writeValue(obj: string | object)
Parameters :
Name Type Optional
obj string | object No
Returns : void

Properties

_editorContainer
Type : ElementRef
Decorators :
@ViewChild('editorContainer', {static: true})
editor
Type : Monaco.editor.IStandaloneCodeEditor
monaco
<c8y-loading *ngIf="!monaco"></c8y-loading>
<div class="editor-container" style="height: 100%" #editorContainer></div>

results matching ""

    No results matching ""