How to clean the "textarea" and inputs after submit?

Question

I'm using a Devextreme library (mentions). Is there a way to submit (click on the Save button) to clear all the textarea information of the component and the other inputs?

I've tested several things but without success, I can't even clean the component's textarea.

Can someone help me?

DEMO

CODE

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
    <label for="exampleFormControlInput1">Name</label>
    <input [(ngModel)]="name" type="text" class="form-control">
  </div>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input [(ngModel)]="email" type="email" class="form-control">
  </div>
       <dx-html-editor (onValueChanged)="ment($event)"> 
    <dxi-mention
        valueExpr="text" 
        displayExpr="text"
        [dataSource]="employees"
    ></dxi-mention>
</dx-html-editor>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary" (click)="Save()">Save</button>
        </div>    
      </div>
    </div>
  </div>

Answer 1

You should get the instance/component and reset the value (Shown below).

import { DxHtmlEditorComponent } from 'devextreme-angular';

@ViewChild(DxHtmlEditorComponent, {static: false}) dxHtmlEditor;

Save(){
   this.name = null;
   this.email = null;
   this.dxHtmlEditor.instance.reset()
 }

Working Demo
Read more here