diff --git a/README.md b/README.md
index 6c4d73c..02e097e 100644
--- a/README.md
+++ b/README.md
@@ -93,7 +93,7 @@ class MainModule {}
| `resultMaxHeight` | `string` | | `'200px'` | change the height size of results | |
| `maxResults` | `number` | | `0` | maximum results limit (`0` = unlimited) | |
| `maxResultsMessage` | `string` | | `'Too much result…'` | message when maximum result | |
-| `grid` | `number` or `string` | | | option by line in grid layout (empty or `0` = no grid layout)
number: item by line
string: minimal item width | |
+| `grid` | `number` or `string` | | | option by line in grid layout (empty or `0` = no grid layout)
`number`: item by line
`string`: minimal item width | |
| `listPosition` | `'below'`
`'above'`
`'auto'` ¹ | | `'below'` | the position for the dropdown list | ¹ `'auto'`: only with `overlay` |
| `infiniteScroll` | `boolean` | | `false` | active infiniteScroll on dropdown list | with `ngx-infinite-scroll` |
| `infiniteScrollDistance` | `number` | | `1.5` | infiniteScroll distance | with `ngx-infinite-scroll` |
@@ -103,6 +103,8 @@ class MainModule {}
| `templates` | `TemplateRef`
`{option?: TemplateRef, group?: TemplateRef}`
etc.
(see ”possible object” in [Templating](#templating)) | | | use templates for formatting content (see [Templating](#templating)) | |
| `templateSelection` | `TemplateRef` | | | use templates for formatting content (see [Templating](#templating)) | |
| `noLabelTemplate` | `boolean` | | `false` | do not use the template in the selection, stay in text mode | |
+| `selectionOverride` | `string` or function ([`Select2SelectionOverride`](#select2-data-structure)) | | | Replace selection by a text
`string`: `%size%` = total selected options
`function`: juste show the string | |
+| `selectionNoWrap` | `boolean` | | `false` | Force selection on one line | |
| `editPattern` | `(str: string) => string` | | | use it for change the pattern of the filter search | |
| `ngModel`
`id`
`required`
`disabled`
`readonly`
`tabIndex` | | | | just like a `select` control | |
| `(update)` | `(event: `[`Select2UpdateEvent`](#select2-data-structure)`) => void` | event | | triggered when user select an option | |
@@ -115,6 +117,13 @@ class MainModule {}
| `(removeOption)` | `(event: `[`Select2RemoveEvent`](#select2-data-structure)`) => void` | event | | triggered when an option is removed from the list of selected options options list | with `multiple` |
| `(autoCreateItem)` | `(event: `[`Select2AutoCreateEvent`](#select2-data-structure)`) => void` | event | | triggered when a new item has been added | with `autoCreate` |
+ @Input() selectionOverride: Select2SelectionOverride;
+
+ /** force selection on one line */
+ @HostBinding('class.select2-selection-nowrap')
+ @Input({ transform: booleanAttribute })
+ selectionNoWrap = false;
+
### select2 data structure
```ts
@@ -206,6 +215,8 @@ export interface Select2ScrollEvent {
/** current data */
readonly data: Select2Data;
}
+
+export type Select2SelectionOverride = string | ((params: { size: number; options: Select2Option[] | null }) => string);
```
### Templating
diff --git a/projects/ng-select2-component/src/lib/select2-interfaces.ts b/projects/ng-select2-component/src/lib/select2-interfaces.ts
index 11efe45..ec2e6c1 100644
--- a/projects/ng-select2-component/src/lib/select2-interfaces.ts
+++ b/projects/ng-select2-component/src/lib/select2-interfaces.ts
@@ -90,3 +90,5 @@ export interface Select2ScrollEvent {
/** current data */
readonly data: Select2Data;
}
+
+export type Select2SelectionOverride = string | ((params: { size: number; options: Select2Option[] | null }) => string);
diff --git a/projects/ng-select2-component/src/lib/select2.component.html b/projects/ng-select2-component/src/lib/select2.component.html
index 486d45d..040ee25 100644
--- a/projects/ng-select2-component/src/lib/select2.component.html
+++ b/projects/ng-select2-component/src/lib/select2.component.html
@@ -31,7 +31,12 @@
[class.select2-selection--single]="!multiple"
role="combobox"
>
- @if (!multiple) {
+ @if (selectionOverride) {
+
+ @if (!multiple && resettable && resetSelectedValue !== value && select2Option && !(disabled || readonly)) {
+ ×
+ }
+ } @else if (!multiple) {
@if (!select2Option) {
@@ -51,14 +56,11 @@
>{{ placeholder }}
- }
- @if (!multiple && resettable && resetSelectedValue !== value && select2Option && !(disabled || readonly)) {
- ×
- }
- @if (!multiple) {
+ @if (resettable && resetSelectedValue !== value && select2Option && !(disabled || readonly)) {
+ ×
+ }
- }
- @if (multiple) {
+ } @else {