CoreUI PRO for Angular v5.7.32 - Multi Select Option Groups and Autocomplete on Angular Aria

We are pleased to announce the release of CoreUI PRO for Angular v5.7.32. This release adds selectable option groups and a custom dropdown header to the Multi Select, rebuilds the Autocomplete on the Angular Aria combobox with a signal forms control and a virtual scroller, and aligns the library with Angular 22.2.1. The Autocomplete changes include behavior changes marked as possibly breaking - see the Migration Notes.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

Angular

Bootstrap

React.js

Vue.js

How to Update

To update to CoreUI PRO for Angular v5.7.32, run:

ng update @angular/core@22 @angular/cli@22 @coreui/coreui-pro@~5.27.0 @coreui/angular-pro@~5.7.32

• Please ensure that there are no error messages in the results.
• Download the latest PRO packages from CoreUI Downloads.

What’s New

Multi Select: Selectable Option Groups

optionsGroupsSelectable turns each projected group label into a toggle for the enabled options of its group that match the search. With optionsGroupsStyle="checkbox" (default) and multiple, the label is a role="checkbox" with a tri-state indicator and aria-checked (false / mixed / true), and the toggle respects selectionLimit.

Multi Select: Custom Dropdown Header

The dropdown header can be replaced with your own template. Its context carries the selection counts (selected, total, filtered, filteredSelected) as the implicit value and the selectAll, deselectAll, selectFiltered and deselectFiltered actions under actions:

<c-multi-select multiple>
  <ng-template cTemplateId="multiSelectHeaderTemplate" let-state let-actions="actions">
    <button type="button" (click)="actions.selectAll()">Select all ({{ state.selected }}/{{ state.total }})</button>
  </ng-template>
  ...
</c-multi-select>

More Multi Select Improvements

• hideSelectAllOnSearchNoResults (default true) hides the select all button when the search matches nothing; set it to false to keep the button visible.
• ariaSearchLabel names the search input and ariaTagDeleteLabel the tag delete buttons.
• selectionLimitReached now emits the limit.
• New default texts: searchNoResultsLabel is No results found (was no items), ariaCleanerLabel is Clear all selections (was Clear selection), the tag delete button is named Remove <label> (was Clear) and the search input Search options.

Multi Select Bug Fixes

• ArrowDown in the search input moves focus to the first enabled option when the caret is at the end of the text, except with Alt or during IME composition.
• The virtual scroll viewport fills the dropdown on the first open instead of leaving the scrollbar inside the menu until the width syncs.
• An option’s disabled state is tracked as a signal, so the group state and the option classes follow it after the first render.
• In single selection, the header actions select the first option or clear the selection instead of throwing in the selection model.
• cTemplateId templates are picked up outside the virtual scroller too.
• The delayed search reset is skipped once the component is destroyed, so it no longer logs NG0953.

Autocomplete on the Angular Aria Combobox

The Autocomplete is rebuilt on the Angular Aria combobox: the input is an ngCombobox, the list an ngListbox with ngOption options. Focus stays in the input, and the highlighted option is announced through aria-activedescendant.

• Signal forms control: value is a model and the new touch output marks the field touched. ngModel and formControl bind through the same path; the directive no longer provides NG_VALUE_ACCESSOR.
• Virtual scroller: virtualScroller renders the options in the CDK virtual scroll viewport, loaded in a deferred chunk, with the row height measured at runtime and aria-setsize/aria-posinset on the options.
• Option groups: Groups render in role="group" containers labelled by their group label; in the virtual list each option is described by the labels of its groups.
• No results: searchNoResultsLabel accepts a TemplateRef, and true shows the default No results found.
• Change detection: The component uses OnPush change detection.

<input cAutocomplete [options]="options" [virtualScroller]="true" [(value)]="country" (touch)="onTouched()" />

Autocomplete Bug Fixes

• Selecting an option writes the option’s value (number or string) instead of its label, and valueChange emits that value.
• Typing clears the selection at once; only the search waits for delay, and keys pressed before it act on the new text.
• Home/End go to the first/last option, PageUp/PageDown move by visibleItems, and modified Home/End stay with the text field.
• Tab commits the highlighted option and leaves the field instead of moving focus into the list.

Deprecations

• Autocomplete: search: 'global' (and { global: true }) is deprecated and has no effect - typing anywhere in the component always continues in the search input.

Internal Improvements

• Tests: Real timers are restored after the Autocomplete and Multi Select search specs, so leaked fake timers no longer hang the next spec file, and the Autocomplete spec hosts have their own selectors.

Dependency Updates

We have updated key dependencies to their latest compatible versions for CoreUI PRO for Angular v5.7.32:

Angular Core Updates

• @angular/aria to: 22.2.1
• @angular/cdk to: 22.2.1
• @angular/common to: 22.2.1
• @angular/compiler to: 22.2.1
• @angular/core to: 22.2.1
• @angular/forms to: 22.2.1
• @angular/localize to: 22.2.1
• @angular/platform-browser to: 22.2.1
• @angular/router to: 22.2.1

Angular Development Tools

• @angular-devkit/schematics to: 22.2.1
• @angular/build to: 22.2.1
• @angular/cli to: 22.2.1
• @angular/compiler-cli to: 22.2.1
• @angular/language-service to: 22.2.1
• ng-packagr to: 22.2.4

Development Tools

• @types/node to: 26.6.3
• @vitest/coverage-v8 to: 5.0.3
• @vitest/ui to: 5.0.3
• typescript-eslint to: 8.71.0
• vitest to: 5.0.3

Migration Notes

The library changelog marks the Autocomplete changes as possibly breaking. After upgrading:

1. Install updated dependencies.
2. Run your test suite and verify the build.
3. Autocomplete value: Selecting an option now writes its value instead of its label, and valueChange emits that value. If your code expected the label, look it up from your options by value.
4. Autocomplete keyboard: Tab now commits the highlighted option and leaves the field.
5. Autocomplete forms: ngModel and formControl bind through the signal forms control path, without NG_VALUE_ACCESSOR. Re-test forms that use the Autocomplete, and drop search: 'global', which no longer has any effect.
6. Multi Select texts: If your tests or translations match the old default texts (no items, Clear selection, Clear), update them or set searchNoResultsLabel, ariaCleanerLabel and ariaTagDeleteLabel explicitly.

For the latest package files and update access, visit CoreUI Downloads.