@stackline/angular-multiselect-dropdown 21.2.0 → 22.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -19
- package/fesm2022/stackline-angular-multiselect-dropdown.mjs +207 -304
- package/package.json +9 -7
package/README.md
CHANGED
|
@@ -3,16 +3,19 @@
|
|
|
3
3
|
> A maintained Angular multiselect dropdown for classic Angular forms workflows, with search, grouping, custom item and badge templates, lazy loading, custom CSS/SCSS theming, accessibility-focused and keyboard/ARIA tested support, and support for both template-driven and reactive forms.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)
|
|
6
|
-
[](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)
|
|
7
6
|
[](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)
|
|
8
7
|
[](https://github.com/alexandroit/angular-multiselect-dropdown/blob/master/LICENSE)
|
|
9
|
-
[](https://alexandro.net/docs/angular/multiselect/angular-22/)
|
|
9
|
+
[](https://www.typescriptlang.org)
|
|
10
|
+
[](https://www.reddit.com/r/Stackline/)
|
|
12
11
|
|
|
13
|
-
**[Documentation & Live Demos](https://alexandro.net/docs/angular/multiselect/)** | **[Angular
|
|
12
|
+
**[Documentation & Live Demos](https://alexandro.net/docs/angular/multiselect/)** | **[Angular 22 Demo](https://alexandro.net/docs/angular/multiselect/angular-22/)** | **[Angular 21 StackBlitz](https://stackblitz.com/github/alexandroit/stackline-angular-multiselect-angular-21?startScript=start&initialpath=%2Fbasic)** | **[npm](https://www.npmjs.com/package/@stackline/angular-multiselect-dropdown)** | **[Issues](https://github.com/alexandroit/angular-multiselect-dropdown/issues)** | **[Repository](https://github.com/alexandroit/angular-multiselect-dropdown)** | **[Community Discussions](https://www.reddit.com/r/Stackline/)**
|
|
14
13
|
|
|
15
|
-
|
|
14
|
+
<p align="center">
|
|
15
|
+
<img src="https://alexandro.net/images/public/2026/06/dropdownlist.gif" alt="@stackline/angular-multiselect-dropdown live dropdown preview" width="420">
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
**Latest tested package release:** `22.0.0` for Angular `22.x`
|
|
16
19
|
|
|
17
20
|
---
|
|
18
21
|
|
|
@@ -24,15 +27,15 @@
|
|
|
24
27
|
|
|
25
28
|
The original `angular2-multiselect-dropdown` package became difficult to keep current across multiple Angular generations. This maintained package keeps the classic API and template structure intact, introduces the new primary selector `<angular-multiselect>`, preserves the legacy alias `<angular2-multiselect>`, and publishes the project line by line so older applications can keep a predictable upgrade path.
|
|
26
29
|
|
|
27
|
-
The repository contains the full documentation matrix from Angular 2 through Angular
|
|
30
|
+
The repository contains the full documentation matrix from Angular 2 through Angular 22. The current tested package release is `22.0.0` for Angular 22.x applications.
|
|
28
31
|
|
|
29
|
-
The Angular
|
|
32
|
+
The Angular 22 package is compatible with Angular 22.x and was tested in a real Angular 22.0.0 application before publication. The 22.0.x line keeps the Angular 21.2.x behavior baseline: accessibility-focused keyboard navigation, focus handling, and ARIA support for the dropdown trigger, clear-all action, selected chips, listbox, and lazy-loaded results. It carries the React 19.1.x combobox contract into Angular patterns: configurable keyboard behavior, matching `aria-selected` plus `aria-checked`, selected-object preservation across async data refreshes, richer template contexts, and renderless state helpers for custom Angular HTML.
|
|
30
33
|
|
|
31
34
|
## Features
|
|
32
35
|
|
|
33
36
|
| Feature | Supported |
|
|
34
37
|
| :--- | :---: |
|
|
35
|
-
| Angular
|
|
38
|
+
| Angular 22 tested release line | ✅ |
|
|
36
39
|
| Multi-select and single-select modes | ✅ |
|
|
37
40
|
| Search and filter | ✅ |
|
|
38
41
|
| Group by field | ✅ |
|
|
@@ -53,12 +56,12 @@ The Angular 21 package is compatible with Angular 21.x and was tested in a real
|
|
|
53
56
|
|
|
54
57
|
1. [Rename Note](#rename-note)
|
|
55
58
|
2. [Angular Version Compatibility](#angular-version-compatibility)
|
|
56
|
-
3. [StackBlitz Playground](#stackblitz-playground)
|
|
59
|
+
3. [Angular 21 StackBlitz Playground](#angular-21-stackblitz-playground)
|
|
57
60
|
4. [Installation](#installation)
|
|
58
61
|
5. [Setup](#setup)
|
|
59
62
|
6. [Custom CSS and SCSS Themes](#custom-css-and-scss-themes)
|
|
60
63
|
7. [Basic Usage](#basic-usage)
|
|
61
|
-
8. [Official Angular
|
|
64
|
+
8. [Official Angular 22 Test Matrix](#official-angular-22-test-matrix)
|
|
62
65
|
9. [Keyboard and ARIA Contract](#keyboard-and-aria-contract)
|
|
63
66
|
10. [Custom Templates](#custom-templates)
|
|
64
67
|
11. [Renderless State Helper](#renderless-state-helper)
|
|
@@ -80,11 +83,12 @@ The Angular 21 package is compatible with Angular 21.x and was tested in a real
|
|
|
80
83
|
|
|
81
84
|
Each package family only installs on its matching Angular family. Framework major and package major are not always the same package number, so use the package family column below.
|
|
82
85
|
|
|
83
|
-
Peer ranges are intentionally bounded to the tested Angular major. The Angular
|
|
86
|
+
Peer ranges are intentionally bounded to the tested Angular major. The Angular 22 line stays on `>=22.0.0 <23.0.0`; Angular 21 stays on `>=21.0.0 <22.0.0`. Do not treat one package family as an open-ended dependency for the next Angular major.
|
|
84
87
|
|
|
85
88
|
| Package family | Framework family | Peer range | Tested release window | Demo link |
|
|
86
89
|
| :---: | :---: | :---: | :---: | :--- |
|
|
87
|
-
| **
|
|
90
|
+
| **22.x** | **Angular 22 only** | **`>=22.0.0 <23.0.0`** | **22.0.0 -> 22.0.0** | [Angular 22 family docs](https://alexandro.net/docs/angular/multiselect/angular-22/) |
|
|
91
|
+
| **21.x** | **Angular 21 only** | **`>=21.0.0 <22.0.0`** | **21.2.1 -> 21.2.14** | [Angular 21 family docs](https://alexandro.net/docs/angular/multiselect/angular-21/) |
|
|
88
92
|
| **20.x** | **Angular 20 only** | **`>=20.0.0 <21.0.0`** | **20.0.1 -> 20.3.21** | [Angular 20 family docs](https://alexandro.net/docs/angular/multiselect/angular-20/) |
|
|
89
93
|
| **19.x** | **Angular 19 only** | **`>=19.0.0 <20.0.0`** | **19.0.1 -> 19.2.22** | [Angular 19 family docs](https://alexandro.net/docs/angular/multiselect/angular-19/) |
|
|
90
94
|
| **18.x** | **Angular 18 only** | **`>=18.0.0 <19.0.0`** | **18.0.1 -> 18.2.14** | [Angular 18 family docs](https://alexandro.net/docs/angular/multiselect/angular-18/) |
|
|
@@ -104,7 +108,7 @@ Peer ranges are intentionally bounded to the tested Angular major. The Angular 2
|
|
|
104
108
|
| **4.x** | **Angular 4 only** | **`>=4.0.0 <5.0.0`** | **4.0.2 -> 4.4.7** | [Angular 4 family docs](https://alexandro.net/docs/angular/multiselect/angular-4/) |
|
|
105
109
|
| **2.x** | **Angular 2 only** | **`>=2.0.0 <3.0.0`** | **compatible with 2.x; tested on 2.4.10** | [Angular 2 family docs](https://alexandro.net/docs/angular/multiselect/angular-2/) |
|
|
106
110
|
|
|
107
|
-
## StackBlitz Playground
|
|
111
|
+
## Angular 21 StackBlitz Playground
|
|
108
112
|
|
|
109
113
|
The editable StackBlitz entry is one Angular 21 playground with isolated lazy routes. Official links use `stackblitz.com/github` against the maintained GitHub repository, so they stay tied to the latest pushed source instead of creating stale forked copies for every example. Each example has its own folder, Angular module, data object, and URL.
|
|
110
114
|
|
|
@@ -138,10 +142,10 @@ The editable StackBlitz entry is one Angular 21 playground with isolated lazy ro
|
|
|
138
142
|
## Installation
|
|
139
143
|
|
|
140
144
|
```bash
|
|
141
|
-
npm install @stackline/angular-multiselect-dropdown@
|
|
145
|
+
npm install @stackline/angular-multiselect-dropdown@22.0.0 --save-exact
|
|
142
146
|
```
|
|
143
147
|
|
|
144
|
-
Install `
|
|
148
|
+
Install `22.0.0` for Angular 22.x applications. This line keeps the tested Angular behavior, makes `<angular-multiselect>` the documented standard selector, keeps `<angular2-multiselect>` only as a legacy compatibility alias, includes the accessibility-focused and keyboard/ARIA tested interaction contract, preserves selected objects during async refreshes, and keeps dropdown surfaces opaque in clipped containers.
|
|
145
149
|
|
|
146
150
|
## Setup
|
|
147
151
|
|
|
@@ -235,9 +239,9 @@ dropdownSettings = {
|
|
|
235
239
|
</angular-multiselect>
|
|
236
240
|
```
|
|
237
241
|
|
|
238
|
-
## Official Angular
|
|
242
|
+
## Official Angular 22 Test Matrix
|
|
239
243
|
|
|
240
|
-
The
|
|
244
|
+
The Angular 22 release was tested in a real Angular `22.0.0` application with `@stackline/angular-multiselect-dropdown@22.0.0`. The docs use the same example pattern from the clean test app, including the accessibility-focused keyboard, focus, and ARIA behavior, responsive dropdown width handling, opaque menu surfaces, and dialog-safe positioning carried forward from the Angular 21.2.x line.
|
|
241
245
|
|
|
242
246
|
Switch between skins through the settings object:
|
|
243
247
|
|
|
@@ -420,7 +424,7 @@ settings = {
|
|
|
420
424
|
};
|
|
421
425
|
```
|
|
422
426
|
|
|
423
|
-
In `21.2.
|
|
427
|
+
In the `21.2.x` line, `tagToBody: true` renders the open panel outside clipping containers, keeps it aligned to the original trigger, keeps the menu surface opaque, recalculates position on scroll and resize, and cleans it up on close or destroy. `appendToBody: true` is also accepted as an alias for teams that prefer that name.
|
|
424
428
|
|
|
425
429
|
## Events
|
|
426
430
|
|