ng-select2-component 17.3.2 → 19.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.
Files changed (25) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/README.md +79 -40
  3. package/fesm2022/ng-select2-component.mjs +432 -173
  4. package/fesm2022/ng-select2-component.mjs.map +1 -1
  5. package/package.json +11 -11
  6. package/types/ng-select2-component.d.ts +599 -0
  7. package/types/ng-select2-component.d.ts.map +1 -0
  8. package/index.d.ts +0 -6
  9. package/lib/select2-const.d.ts +0 -39
  10. package/lib/select2-const.d.ts.map +0 -1
  11. package/lib/select2-highlight.pipe.d.ts +0 -10
  12. package/lib/select2-highlight.pipe.d.ts.map +0 -1
  13. package/lib/select2-hint.component.d.ts +0 -6
  14. package/lib/select2-hint.component.d.ts.map +0 -1
  15. package/lib/select2-interfaces.d.ts +0 -97
  16. package/lib/select2-interfaces.d.ts.map +0 -1
  17. package/lib/select2-label.component.d.ts +0 -6
  18. package/lib/select2-label.component.d.ts.map +0 -1
  19. package/lib/select2-utils.d.ts +0 -30
  20. package/lib/select2-utils.d.ts.map +0 -1
  21. package/lib/select2.component.d.ts +0 -305
  22. package/lib/select2.component.d.ts.map +0 -1
  23. package/ng-select2-component.d.ts.map +0 -1
  24. package/public_api.d.ts +0 -8
  25. package/public_api.d.ts.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # Changelog of ng-select2
2
2
 
3
+ ## V19.0.0 (2026-06-17)
4
+
5
+ - **zoneless**: remove `zone.js` dependency, fully compatible with `provideZonelessChangeDetection()`
6
+ - feat: add `<ng-option>` and `<ng-group>` template mode directives
7
+ - feat: add checkbox mode with `showOptionCheckbox` input
8
+
9
+ ## V18.0.0 (2026-06-12)
10
+
11
+ - update to **Angular 22**
12
+ - use `inject()` and remove unnecessary params
13
+ - move `@HostBinding` & `@HostListener` to `host`
14
+ - refactor: replace `ngx-infinite-scroll` with native scroll listener
15
+ - Remove `ngx-infinite-scroll` dependency from `package.json` and library `package.json`
16
+ - Replace `InfiniteScrollDirective` with fromEvent-based native scroll listener
17
+
3
18
  ## V17.3.2 (2026-05-24)
4
19
 
5
20
  - feat: add Cyrillic, Greek Arabic and Hebrew for searches and highlight.
package/README.md CHANGED
@@ -13,28 +13,27 @@ npm i ng-select2-component --save
13
13
  ## Requirements
14
14
 
15
15
  - peerDependencies:
16
- - `angular` `^18.1.0` to `^21.0.0`
17
- - `angular/cdk` `^18.1.0` to `^21.0.0`
18
-
19
- - dependencies (include):
20
- - `ngx-infinite-scroll` `^19.0.0` to `^21.0.0`
16
+ - `angular` `^22.0.0`
17
+ - `angular/cdk` `^22.0.0`
21
18
 
22
19
  ### Notes
23
20
 
24
- | Version | For **Angular** | Notes |
25
- | -------------------- | ---------------- | ----------------- |
26
- | `17.2.11` / `17.3.0` | 18.1, 19, 20, 21 | Ivy / Stand-alone |
27
- | `17.1.0` | 19 | Ivy / Stand-alone |
28
- | `16.0.0` | 19 | Ivy / Module |
29
- | `15.4.0` | 18 | Ivy |
30
- | `14.0.1` | 17 | Ivy |
31
- | `13.0.12` | 16.1 | Ivy |
32
- | `12.1.0` | 16 | Ivy |
33
- | `11.1.0` | 15 | Ivy |
34
- | `10.0.0` | 14 | Ivy |
35
- | `9.0.0` | 13 | Ivy |
36
- | `8.1.0` | 10, 11 and 12 | View Engine |
37
- | `7.3.1` | 7, 8 and 9 | View Engine |
21
+ | Version | For **Angular** | Notes |
22
+ | --------- | ---------------- | ----------------------------------------------------------- |
23
+ | `19.0.0` | 22 | Zoneless |
24
+ | `18.0.0` | 22 | Ivy / Stand-alone, native scroll (no `ngx-infinite-scroll`) |
25
+ | `17.3.2` | 18.1, 19, 20, 21 | Ivy / Stand-alone |
26
+ | `17.1.0` | 19 | Ivy / Stand-alone |
27
+ | `16.0.0` | 19 | Ivy / Module |
28
+ | `15.4.0` | 18 | Ivy |
29
+ | `14.0.1` | 17 | Ivy |
30
+ | `13.0.12` | 16.1 | Ivy |
31
+ | `12.1.0` | 16 | Ivy |
32
+ | `11.1.0` | 15 | Ivy |
33
+ | `10.0.0` | 14 | Ivy |
34
+ | `9.0.0` | 13 | Ivy |
35
+ | `8.1.0` | 10, 11 and 12 | View Engine |
36
+ | `7.3.1` | 7, 8 and 9 | View Engine |
38
37
 
39
38
  ## Demo
40
39
 
@@ -42,23 +41,50 @@ npm i ng-select2-component --save
42
41
 
43
42
  ## Features
44
43
 
45
- - select one
46
- - options or groups (list or grid)
47
- - scroll
48
- - local search
49
- - select by keyboard
50
- - disabled option
51
- - disabled component
52
- - hide search box
53
- - placeholder
54
- - multiple selection
55
- - add items not found in multiple
56
- - material style
57
- - form binding
58
- - templating
59
- - drag'n drop
60
- - WAI (accessibility)
61
- - etc.
44
+ - **Selection**
45
+ - Single and multiple selection
46
+ - Limit the number of selections (multiple)
47
+ - Hide already selected items from the dropdown (multiple)
48
+ - Select all / Remove all button (multiple)
49
+ - Checkbox next to each option
50
+ - Drag & drop reordering of selected items (multiple)
51
+ - Resettable with configurable reset value
52
+ - Auto-create items not present in the list
53
+ - **Data representation**
54
+ - Options and option groups
55
+ - Declarative with `<ng-option>` and `<ng-group>` tags
56
+ - Infinite scroll
57
+ - Maximum results limit
58
+ - Grid layout (fixed column count or auto cell size)
59
+ - **Selection representation**
60
+ - Selection override: replace the selection area with custom text or a function
61
+ - Selection no-wrap: keep selected tags on a single line
62
+ - **Search**
63
+ - Local filtering with configurable minimum character threshold
64
+ - External / async search (`customSearchEnabled`)
65
+ - Highlight matched text in options (ignore the diacritics for: Latin, Japanese, Cyrillic, Greek, Arabic & Hebrew)
66
+ - **Keyboard**
67
+ - Standard keyboard navigation
68
+ - Native HTML `<select>` navigation mode (`nativeKeyboard`)
69
+ - **Templates**
70
+ - Custom rendering for options, groups and the selection area
71
+ - Per-item template ids (`templateId`, `templateSelectionId`)
72
+ - **Style**
73
+ - Four modes: default, material, borderless, no-style
74
+ - Fully themeable via CSS custom properties
75
+ - **Dropdown**
76
+ - Dropdown position: below, above, or auto
77
+ - Angular CDK Overlay mode
78
+ - **Forms**
79
+ - `ngModel` and `FormControl` binding
80
+ - `required`, `disabled`, `readonly`, `tabIndex`, `placeholder`
81
+ - **Accessibility**
82
+ - WAI-ARIA roles, live regions, `ariaLabelledby`, `ariaDescribedby`, hint slot
83
+ - **Angular**
84
+ - signals-based API (`input()` / `output()`)
85
+ - standalone component
86
+ - zoneless compatible (no `zone.js` dependency)
87
+ - Web Component compatible naming (`<ng-select2>`)
62
88
 
63
89
  ## Usage
64
90
 
@@ -101,6 +127,18 @@ or
101
127
  </ng-select2>
102
128
  ```
103
129
 
130
+ or with declarative `<ng-option>` / `<ng-group>` (no `[data]` binding needed):
131
+
132
+ ```html
133
+ <ng-select2 [value]="value" (update)="update($event)">
134
+ <ng-group label="Fruits">
135
+ <ng-option value="apple">Apple</ng-option>
136
+ <ng-option value="banana">Banana</ng-option>
137
+ </ng-group>
138
+ <ng-option value="other">Other</ng-option>
139
+ </ng-select2>
140
+ ```
141
+
104
142
  ### properties and events of the component
105
143
 
106
144
  | name | type | default | description | required |
@@ -125,9 +163,9 @@ or
125
163
  | `maxResultsMessage` | `string` | `'Too much result…'` | message when maximum result | |
126
164
  | `grid` | `number` or `string` | | option by line in grid layout (empty or `0` = no grid layout)<br>`number`: item by line<br>`string`: minimal item width | |
127
165
  | `listPosition` | `'below'`<br>`'above'`<br>`'auto'` ¹ | `'below'` | the position for the dropdown list | ¹ `'auto'`: only with `overlay` |
128
- | `infiniteScroll` | `boolean` | `false` | active infiniteScroll on dropdown list | with `ngx-infinite-scroll` |
129
- | `infiniteScrollDistance` | `number` | `1.5` | infiniteScroll distance | with `ngx-infinite-scroll` |
130
- | `infiniteScrollThrottle` | `number` | `150` | infiniteScroll throttle | |
166
+ | `infiniteScroll` | `boolean` | `false` | enable infinite scroll on the dropdown list | |
167
+ | `infiniteScrollDistance` | `number` | `1.5` | scroll threshold as a fraction of the list height (e.g. `1.5` = bottom 15%) | |
168
+ | `infiniteScrollThrottle` | `number` | `150` | debounce time in ms between scroll event emissions | |
131
169
  | `overlay` | `boolean` | `false` | active an overlay mode for dropdown list (with angular cdk). (See [Overlay](#overlay)) | |
132
170
  | `styleMode` | `'default'`<br>`'material'`<br>`'noStyle'`<br>`'borderless'` | `'default'` | change style for material style or remove border and background color | |
133
171
  | `templates` | [`Select2Template`](#select2-data-structure)<br>(see ”possible object” in [Templating](#templating)) | | use templates for formatting content (see [Templating](#templating)) | |
@@ -136,6 +174,7 @@ or
136
174
  | `selectionOverride` | [`Select2SelectionOverride`](#select2-data-structure) | | Replace selection by a text<br>`string`: `%size%` = total selected options<br>`function`: juste show the string | |
137
175
  | `selectionNoWrap` | `boolean` | `false` | force selection on one line | |
138
176
  | `showSelectAll` | `boolean` | `false` | Add an option to select all options | with `multiple` |
177
+ | `showOptionCheckbox` | `boolean` | `false` | Show a checkbox next to each option in the dropdown | |
139
178
  | `selectAllText` | `string` | `'Select all'` | Text when all options as not selected | with `multiple` |
140
179
  | `removeAllText` | `string` | `'Remove all'` | text when all options as selected | with `multiple` |
141
180
  | `editPattern` | `(str: string) => string` | | use it for change the pattern of the filter search | |
@@ -148,7 +187,7 @@ or
148
187
  | `(focus)` | `(event: Select2) => void` | | triggered when user enters the component | |
149
188
  | `(blur)` | `(event: Select2) => void` | | triggered when user leaves the component | |
150
189
  | `(search)` | `(event: `[`Select2SearchEvent`](#select2-data-structure)`) => void` | | triggered when search text changed | with `customSearchEnabled` |
151
- | `(scroll)` | `(event: `[`Select2ScrollEvent`](#select2-data-structure)`) => void` | | triggered when infiniteScroll is on `up` or `down` position | with `ngx-infinite-scroll` |
190
+ | `(scroll)` | `(event: `[`Select2ScrollEvent`](#select2-data-structure)`) => void` | | triggered when infinite scroll reaches the `up` or `down` threshold | |
152
191
  | `(removeOption)` | `(event: `[`Select2RemoveEvent`](#select2-data-structure)`) => void` | | triggered when an option is removed from the list of selected options options list | with `multiple` |
153
192
  | `(autoCreateItem)` | `(event: `[`Select2AutoCreateEvent`](#select2-data-structure)`) => void` | | triggered when a new item has been added | with `autoCreate` |
154
193