Topic: Programmatically selecting the selectAllOption doesn't select all options
Expected behavior
When executing this code: this.mySelect.selectAllOption.select(); it selects/deselects the <mdb-select-all-option> as well as all the other <mdb-option>
Actual behavior
It only selects the <mdb-select-all-option>
We don't have a public API that would allow selecting the option programmatically. The approach with ngModel is correct in this case, but we need to fix the bug you mentioned.
As a workaround, you can try to simulate a click event on the select-all option.
HTML:
<mdb-select-all-option #selectAll>Select all</mdb-select-all-option>
TS:
@ViewChild('selectAll', { read: ElementRef}) selectAllEl: ElementRef;
ngAfterViewInit(): void {
Promise.resolve().then(() => {
this.selectAllEl.nativeElement.click();
});
}
The wrapper with Promise may not be necessary if you don't run this code on component initialization.
Dave Moniz premium priority commented 3 years ago
I used this answer to find a very suitable work around. Thanks for the tip.
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 1.0.0-beta5
- Device: PC
- Browser: Google Chrome
- OS: Arch Linux
- Provided sample code: No
- Provided link: No
Dave Moniz premium priority commented 3 years ago
I'm trying to have a select that has all options selected prior to first use.
I passed an
[(ngModel)]with and array of all of the values -> but this would have all of the<mdb-option>selected, but not the<mdb-select-all-option>... at which point if I select the<mdb-select-all-option>it would present all of the values from the[(ngModel)]in the label instead of all the labels of the selected options. Clicking the<mdb-select-all-option>again resets everything to how it should be.