Change Editor Language Dynamically

[sanjay51]

Hi,

I've an editor like this -

<ngx-monaco-editor #monacoEditor style="height: 100%;" (init)="onInit($event)" [options]="editorOptions"
                       (ngModelChange)="this.candidateDocument.save()" [(ngModel)]="getData().candidateData">
    </ngx-monaco-editor>

I want to change the language of the monaco editor dynamically. Things I've tried -

1. app.component.ts:

   
   @ViewChild('monacoEditor') monacoEditor;
   ....
   
   changeLanguage() {
   this.monacoEditor.options.language = 'plaintext'; // doesn't work.
   }

2. app.component.ts:

   private editor: MonacoStandaloneCodeEditor = null;
   
   onInit(editor: MonacoStandaloneCodeEditor) {
   this.editor = editor;
   }
   ...
   
   changeLanguage() {
   this.editorOptions.language = 'plaintext';
   this.editor.updateOptions(this.editorOptions); // doesn't work
   }

Could you please help me changing the language dynamically? Thank you.

[jmarc-roy]

Hi @sanjay51,

our library components uses OnPush change detection strategy, so you have to provide a new reference of the options object to change the language.

You will find an example on this issue: https://github.com/materiahq/ngx-monaco-editor/issues/23.

[sanjay51]

Perfect, thanks a lot @GeoAstronaute .

[tanjie123]

nice！