0

I have a dropdown that affects a second dependant dropdown. When the first is in a state of nothing selected, I want the dependant dropdown to also have whatever is selected deselected. Therefore I need to programmatically deselect the second dropdown.

I've got as far as resetting the selectedItems array to [] which clears the dropdown list. However, the previously selected items are still sitting in the bar where the placeholder text should ideally be restored. How can I do this?

Ree
  • 863
  • 2
  • 18
  • 38
  • Without code sample is not possible for anyone to gives you a proper solution, – Suneel Kumar Aug 10 '21 at 06:21
  • I understand your point however this question does not regard a specific problem within my code but rather a general question regarding a plugin. I could phrase the whole question as this: how can one programmatically deselect items and have the bar that shows selected items reflect this? – Ree Aug 10 '21 at 12:30

1 Answers1

1

I finally solved this by resetting the form.

In my HTML component I gave it a form name: formControlName="multiselect"

In my typescript I had this @ViewChild('multiselect') multiSelect; and a method which did this: this.form.get("multiselect").setValue([]); and called it whenever I deselected in the first multiselect or selected a new option in the first multiselect.

Worked a treat!

Ree
  • 863
  • 2
  • 18
  • 38