Clear data from the same component when clicking the button

Question

In a component, I am using the same library twice (out of necessity). When you submit the form, only one component is cleaned, when in fact both should be cleaned.

I don't know why a component is only cleaned.

Can someone identify the problem or how can I delete the data in the two components?

DEMO

CODE

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


 clearAll(){  
   this.dxHtmlEditor.instance.reset();
   alert("clear works!")
 }

html

<dx-html-editor>
    <dxi-mention
        valueExpr="text" 
        displayExpr="text"
        [dataSource]="employees"
    ></dxi-mention>
</dx-html-editor>



<dx-html-editor>
    <dxi-mention
        valueExpr="id" 
        displayExpr="text"
        [dataSource]="users"
    ></dxi-mention>
</dx-html-editor>

score 2 · Accepted Answer · answered Jan 21 '20 at 21:31

You're currently getting only one instance with ViewChild. Change it to ViewChildren and loop over them:

import { Component, ViewChildren, QueryList } from "@angular/core";
import { DxHtmlEditorComponent } from "devextreme-angular";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChildren(DxHtmlEditorComponent) editors: QueryList<DxHtmlEditorComponent>;

  clearAll() {
    this.editors.forEach(editor => editor.instance.reset())
  }
}

Blitz

score 0 · Answer 2 · answered Jan 21 '20 at 21:35

0

You need to use ViewChildren because ViewChild references only to a single instance(first occurrence).

Note that the list would be QueryList of DxHtmlEditorComponent

Clear data from the same component when clicking the button

2 Answers2