Angular MultiSelect Select All
The MultiSelect can display a sticky Select All option at the top of the popup. Users can select or deselect all available items with a single action.
To enable the select-all functionality, set the selectAll property to true. Use the selectAllChange event to respond to changes in the select-all state.
The following example demonstrates the select all feature together with checkboxes.
Summary Tags
By default, when select-all is enabled, the summaryTagAfter property defaults to 10 to prevent UI overflow. You can customize this default number by setting the summaryTagAfter property to the desired number of selections, after which a summary tag should be displayed.
The following example demonstrates how select-all works with summary tags when specifying a custom number of selections.
Custom Values
When select-all is enabled alongside custom values, clicking Select All selects only the items from the data source, not any custom values the user has added.
With this combination, clicking Select All collapses all data items into a single summary tag, while custom values remain visible as separate tags.
The following example demonstrates how the select-all functionality works when custom values are allowed.
Filtering
You can combine the select-all functionality with filtering to allow users to select all visible (filtered) items in the list. The select-all functionality will only affect the items that match the current filter criteria.
The following example demonstrates how the select-all feature works with the built-in filtering.
Select All with Virtualization
The select-all functionality works with virtualized MultiSelect to enable efficient selection of large datasets. By default, when virtualization is enabled, clicking Select All selects only the visible items on the current page.
To select all data items across the entire dataset, handle the selectAllChange event and implement custom logic to select all items from your complete data source based on the current select-all state.
The following example demonstrates how to handle the selectAllChange event to select all items in a virtualized dataset.