angularcode-editor

how to reset @ngstack/code-editor on button click?


I am using @ngstack/code-editor in my component, after form submit i want to clear the editor, below is the configuration

theme = 'vs-dark';
model: CodeModel = {
    language: 'html',
    value: '',
    uri: 'main.html',
  };
options = {
    lineNumbers: true,
    contextmenu: true,
    minimap: {
      enabled: false
    }
  };

on submit i call the following function

clearEditor(){
    this.model.value = '';
  }

but above function has no effect, my html looks like follows

<ngs-code-editor
  [theme]="theme"
  [codeModel]="model"
  [options]="options"
  (valueChanged)="onCodeChanged($event)"
  style="height: 300px;">
</ngs-code-editor>

Solution

  • To achive this you need to make a new instance of codeModel. after that just update your codeModel object.

    clearEditor(){
         var newData = {
            language: 'typescript',
            value: '',
            dependencies: [
                '@types/node',
                '@ngstack/translate',
                '@ngstack/code-editor',
                '@angular/core',
            ],
          };
         this.codeModel = JSON.parse(JSON.stringify(newData));
      }
    

    here is a updated stackblitz link please upvote/accept if it helps