CODEWITHSUNDEEP
javascripthtmlangular
Roshini
Roshini

Reputation: 39

How to close angular2-multiselect-dropdown on clicking the data from the dropdown list

I am new to angular and I was trying to access angular2-multiselect-dropdown for single selection and display the selected data. Here, I want the dropdown to close/hide on click of selecting the data. Please check https://stackblitz.com/edit/r7-angular2-multislect

Thank you

Upvotes: 1

Views: 2499

Answers (2)

Adrita Sharma
Adrita Sharma

Reputation: 22213

The idea is to create instance of AngularMultiSelect class in your component using Viewchild and then call it's closeDropdown() method.

Steps:

  1. Add #dropdownRef in template

    <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings" (onSelect)="onItemSelect($event)" #dropdownRef> </angular2-multiselect>

  2. Do the following in your TS file:

    import { AngularMultiSelect } from 'angular2-multiselect-dropdown';

@ViewChild('dropdownRef',{static:false}) dropdownRef: AngularMultiSelect;

onItemSelect(item: any) {
   console.log(item);
   this.dropdownRef.closeDropdown()
}

Working Demo

Upvotes: 2

Buzzinga
Buzzinga

Reputation: 401

Use @ViewChild to access to the dropdown like this: 

@ViewChild(AngularMultiSelect, {static: false}) dDown: AngularMultiSelect;

now you can close the dropdown whenever you want: 

this.dDown.closeDropdown()

Upvotes: 1

Related Questions