Manage the selection and deselection process while updating the button text accordingly.
HTML
<ng-multiselect-dropdown
#dropdown
[data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings">
</ng-multiselect-dropdown>
<button (click)="handleApiCall()">Make API Call</button>
TS
import { Component, ViewChild } from '@angular/core';
import { NgMultiSelectDropDownComponent } from 'ng-multiselect-dropdown';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
@ViewChild('dropdown') dropdown: NgMultiSelectDropDownComponent;
selectAll() {
this.dropdown.selectAll();
this.updateButtonText('Deselect All');
}
unselectAll() {
this.dropdown.unselectAll();
this.updateButtonText('Select All');
}
updateButtonText(text: string) {
const selectAllButton = document.querySelector('.dropdown-select-all-button'); // Adjust this selector based on your button's class or id
if (selectAllButton) {
selectAllButton.textContent = text;
}
}
handleApiCall() {
// Implement your API call logic here
this.selectAll(); // or this.unselectAll() as needed
}
}