editor/editor.component.ts
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
AfterViewInit
OnDestroy
ControlValueAccessor
OnChanges
| providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EditorComponent), multi: true
}
|
| selector | c8y-editor |
| standalone | true |
| imports |
LoadingComponent
NgIf
|
| templateUrl | ./editor.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor(zone: NgZone, themeSwitcher: ThemeSwitcherService)
|
|||||||||
|
Parameters :
|
| 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. |
| 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 |
| Async ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
Promise<void>
|
| ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| register |
register()
|
|
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: (value: string) => void)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: () => void)
|
||||||
|
Parameters :
Returns :
void
|
| setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| writeValue | ||||||
writeValue(obj: string | object)
|
||||||
|
Parameters :
Returns :
void
|
| _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>