Configure Monaco Editor Language and Theme in Angular Typescript

In angular typescript environment, the vscode editor is integrated by ngx-monaco-editor, for how to install ngx-monaco-editor on angular typescript environment, refer to previous article

intergrate-vscode-editor-in-angular

When ngx-nonaco-editor is ready, update your html file, add onInit() callback when initlalizing it,

  <ngx-monaco-editor class="full-height" #codeContainer [options]="editorOptions" [(ngModel)]="code" (onInit)="onInit($event)"></ngx-monaco-editor>

In onInit() function, save the instance,

  onInit(editor: any) {
    this.codeEditor = editor;
  }

Add on language change or theme change event call function

  onChangeLang() {
    (<any>window).monaco.editor.setModelLanguage(this.codeEditor.getModel(), this.editorOptions.language);
    this.code = '//' + this.editorOptions.language;
  }

  onChangeTheme() {
    (<any>window).monaco.editor.setTheme(this.editorOptions.theme);
  }