DevExtreme Vue - Destroy a Widget

To dispose of a DevExtreme widget, free up the allocated resources by calling the dispose() method. Then, remove the widget's associated DOM node:

HTML

<dx-data-grid #dataGridVar id="myDataGrid"></dx-data-grid>

TypeScript

import { ..., ViewChild } from "@angular/core";
import { DxDataGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild("dataGridVar") dataGrid: DxDataGridComponent;

    removeDataGrid (e) {
        this.dataGrid.instance.dispose();
        document.getElementById("myDataGrid").remove();
    }
}

DevExtreme Vue - Destroy a Widget

See Also