Topic: Programmatically selecting the selectAllOption doesn't select all options

Dave Moniz priority asked 2 years ago

Expected behavior

When executing this code:; 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>

Dave Moniz priority commented 2 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.

Arkadiusz Idzikowski staff answered 2 years ago

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.


<mdb-select-all-option #selectAll>Select all</mdb-select-all-option>


@ViewChild('selectAll', { read: ElementRef}) selectAllEl: ElementRef;

  ngAfterViewInit(): void {
    Promise.resolve().then(() => {;

The wrapper with Promise may not be necessary if you don't run this code on component initialization.

Dave Moniz priority commented 2 years ago

I used this answer to find a very suitable work around. Thanks for the tip.

Dave Moniz priority answered 2 years ago

Can confirm this is resolved now as of MDB5 1.0.0.

Closing now.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: PC
  • Browser: Google Chrome
  • OS: Arch Linux
  • Provided sample code: Yes
  • Provided link: No