How to reset the ng-multiselect-dropdown - html

Question

I want to reset the ng-multiselect-dropdown. Is it necessary to put it in a form ?
code -
app.component.html
<div>
<p id = "node">Select a Root API Object - </p>
<p style="width:50%">
<ng-multiselect-dropdown [placeholder]="'Select Root API Object'" [data]="dropdownListRoot" [(ngModel)]="selectedItemsRoot" [settings]="dropdownSettingsRoot"
(onSelect)="onItemSelectRoot($event)" (onSelectAll)="onSelectAllRoot($event)">
</ng-multiselect-dropdown>
</p>
</div>
app.component.ts
export class HierarchySearchComponent implements OnInit {
onItemSelectRoot(item: any) {
this.onlyRootItemSelect = true; // for cypher also.
console.log(item);
this.rootItem = item;
this.nodeSelect = true;
this.rootItemText = this.rootItem.item_text;
console.log("this.rootItemText = ", this.rootItemText);
}
onSelectAllRoot(items: any) {
console.log("On Item select all" + items);
this.nodeSelect = true;
}
}

Answer 1

it is not necessary to put it in form.
Just make the selectedItemsRoot array empty. Call this function resetSelection() from the element/context.
if you are using the button to clear selection, it can be
.html
`<button (click)="resetSelection()" >clear</button>`
.ts
resetSelection() {
this.selectedItemsRoot = [];
}

Answer 2

It is not necessary to put it in a form - if you want to clear the selected items, just set the selectedItemsRoot object to an empty array. I.e.
clearSelection() {
this.selecteditemsRoot = [];
}
And bind that function to a button, or call it with any other method you are using to clear the selection.

Answer 3

if you are using formControlName instead of ngModel then you can use something like this
this.myForm.get(formControlName).setValue([]);