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>
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