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

Question

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>

Answer 1

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