I am using the ng-multiselect-dropdown package in angular 5 for creating a multi-select dropdown. I want to do call a function on close or hide of the drop-down ponent.

like this

closeDropdown : function(){
   console.log("dropdown close triggered");
}

I am using the ng-multiselect-dropdown package in angular 5 for creating a multi-select dropdown. I want to do call a function on close or hide of the drop-down ponent.

like this

closeDropdown : function(){
   console.log("dropdown close triggered");
}

• javascript
• angular
• angular5

6 Answers 6

According to the documentation you can pass closeDropDownOnSelection value true to close the dropdown whenever the selection is done

ng-multiselect dropdown

Incase of multiple selection you can call (onSelect)="onItemSelect($event)"

for more information check this Demo documentation

You can call the function within (change) event.

ex :

<ng-multiselect-dropdown
  (blur)="closeDropdown($event)"
>
</ng-multiselect-dropdown>

To solve the bug identified by satira ( I couldn't ment due to low reputation), ie. "When the ponent which has this multi-dropdown opens for the first time or you reload the page and click anywhere outside the dropdown, onDropDownClose() gets called." For me, it didn't happen after the first time. Anyway, i solved it by getting the id of any element on the screen(header, footer or any div) and used docuement.getElementById('element_id').click() on ngAfterViewInit.

ngAfterViewInit() { document.getElementById('header').click(); }

This made sure that no sideeffects take place on my app. I know this is a messy solution but since closeDropdown() of ng-multidropdown doesn't work, this was my only way out.

I had this issue recently and found a solution that works for me using a bination of (ngModelChange) and (click). When using ng-multiselect-dropdown the other normal HTML Element triggers like (blur) and (change) don't work, but the (ngModelChange) does work. Only problem with that is it triggers when being initialized. But I added a boolean variable to the (click) trigger that does seem to work.

Note that this also works to cover the onSelect, onDeSelect, etc

ponent.ts:

...
dropDownSelect: boolean = false;
dropDownSelection: number;
...
saveFunction(event) {
  if(!this.dropDownSelect) return;
  ...
  this.dropDownSelect = false;
}

ponent.html:

...
<ng-multiselect-dropdown [data]="dataSource" [(ngModel)]="dropDownSelection" [settings]="dropDownSettings" (click)="dropDownSelect = true" (ngModelChange)="saveFunction($event)"></ng-multiselect-dropdown>
...

I tried @misterz's solution but it didn't work. However I modified it and it works perfectly. The trick: In addition to (onDropDownClose), listen to a click event;

 // this act as a differentiator between other calls(bug) and an intended call
 (click)="dropDownSelect = true".

In your ponent, declare your variable and use it like this:

dropDownSelect = false;

saveFunction($event) {
 if (this.dropDownSelect) {
        // close the opening to subsequent actions 
        this.dropDownSelect = false;
        // Perform action;
 };
}

In the source code on GitHub. you will find an onDropDownClose event, which you can use like this:

<ng-multiselect-dropdown
  name="city"
  [placeholder]="'Select City'"
  [data]="cities"
  formControlName="city"
  [disabled]="disabled"
  [settings]="dropdownSettings"
  (onSelect)="onItemSelect($event)"
  (onDropDownClose)="closeDropdown()"
>
</ng-multiselect-dropdown>

This will trigger the closeDropdown() function every time the dropdown is closed (either by clicking on the dropdown or outside of the dropdown list).

Hope this helps!