I'm facing an issue with angular2-multiselect-dropdown where the "SelectAll" functionality is not working correctly. When I click on "SelectAll", it also triggers the deSelectAll event, causing the onDeSelectAll() function to be called and preventing all items from being selected. The Select All checkbox remains unchecked as well. Can someone please help me figure out how to resolve this before my upcoming deadline?
https://i.sstatic.net/WRI1a.png
ts:
ngOnInit() {
this.dropdownList = [
{ id: 1, itemName: "Pacemaker1", value: "Pacemaker1" },
{ id: 2, itemName: "Pacemaker2", value: "Pacemaker2" },
{ id: 4, itemName: "Pacemaker2", value: "Pacemaker2" },
];
this.selectedItems = [];
this.dropdownSettings = {
singleSelection: false,
text: "Select devices",
selectAllText: "Select All",
unSelectAllText: "UnSelect All",
enableSearchFilter: true,
badgeShowLimit: 3,
};
this.getStudies();
}
onItemSelect(item: any) {
this.selectedItems.push(item);
}
OnItemDeSelect(item: any) {
this.selectedItems = this.selectedItems.filter((el) => el.id !== item.id);
}
onSelectAll(items: any) {
console.log("select", items);
this.selectedItems = [];
this.selectedItems.push(items);
}
onDeSelectAll(items: any) {
console.log("deselect", items);
this.selectedItems = [];
}
html:
<div class="form-group">
<label class="form-col-form-label">
Associated Devices
</label>
<angular2-multiselect
class="form-control"
[data]="dropdownList"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)"
formControlName="associatedDevices">
</angular2-multiselect>
</div>
Please check the replicated functionality here https://stackblitz.com/edit/angular-ivy-esame2?file=src%2Fapp%2Fapp.component.html