Package detail

ng-select2-component

Harvest-Dev28.4kMIT17.2.7

An Angular select2 component.

typescript, angular, select2, ng-select2, ng-select, select

readme

Select2

This Angular CLI module it's a fork of select2-component without Vue & React. For Vue or React, please use the original component.

Installation

npm i ng-select2-component --save

Requirements

peerDependencies:
- angular 18.1.0 and more
- angular/cdk 18.1.0 and more
dependencies (include):
- ngx-infinite-scroll 19.0.0 and more

Notes

Version	For Angular	Notes
`17.2.0`	18.1 and more	Ivy / Stand-alone
`17.1.0`	19	Ivy / Stand-alone
`16.0.0`	19	Ivy / Module
`15.4.0`	18	Ivy
`14.0.1`	17	Ivy
`13.0.12`	16.1	Ivy
`12.1.0`	16	Ivy
`11.1.0`	15	Ivy
`10.0.0`	14	Ivy
`9.0.0`	13	Ivy
`8.1.0`	10, 11 and 12	View Engine
`7.3.1`	7, 8 and 9	View Engine

Demo

See a demo and code generator.

Features

select one
options or groups (list or grid)
scroll
local search
select by keyboard
disabled option
disabled component
hide search box
placeholder
multiple selection
add items not found in multiple
material style
form binding
templating
drag'n drop
WAI (accessibility)
etc.

Usage

example

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { Select2, Select2Hint, Select2Label } from 'ng-select2-component';

@Component({
    selector: 'my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.scss'],
    imports: [FormsModule, ReactiveFormsModule, Select2, Select2Hint, Select2Label],
})
class MyComponent {}

<select2 [data]="data" [value]="value" (update)="update($event)"> </select2>

properties and events of the component

name	type	default	description	required
`data` (required)	`Select2Data`	\| the data of the select2
`value`	`Select2Value`	\| initial value
`minCharForSearch`	`number`	`0`	start the search when the number of characters is reached (`0` = unlimited)
`minCountForSearch`	`number`	`6`	hide search box if `options.length < minCountForSearch`
`displaySearchStatus`	`'default'` `'hidden'` `'always'`	`'default'`	display the search box (`default` : is based on `minCountForSearch`)
`placeholder`	`string`	\| the placeholder string if nothing selected
`noResultMessage`	`string`	\| the message string if no results when using the search field
`customSearchEnabled`	`boolean`	`false`	will trigger `search` event, and disable inside filter
`multiple`	`boolean`	`false`	select multiple options
`multipleDrag`	`boolean`	`false`	drag'n drop list of items in selection	with `multiple`
`resettable`	`boolean`	`false`	add a button to reset value
`resetSelectedValue`	`any`	`undefined`	selected option when × is clicked
`autoCreate`	`boolean`	`false`	gives the possibility to add elements not present in the list.
`limitSelection`	`number`	`0`	to limit multiple selection (`0` = unlimited)
`hideSelectedItems`	`boolean`	`false`	remove selected values	with `multiple`
`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
`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`
`infiniteScrollThrottle`	`number`	`150`	infiniteScroll throttle
`overlay`	`boolean`	`false`	active an overlay mode for dropdown list (with angular cdk). (See Overlay)
`styleMode`	`'default'` `'material'` `'noStyle'` `'borderless'`	`'default'`	change style for material style or remove border and background color
`templates`	`Select2Template` (see ”possible object” in Templating)	\| use templates for formatting content (see Templating)
`templateSelection`	`TemplateRef`	\| use templates for formatting content (see Templating)
`noLabelTemplate`	`boolean`	`false`	do not use the template in the selection, stay in text mode
`selectionOverride`	`Select2SelectionOverride`	\| Replace selection by a text `string`: `%size%` = total selected options `function`: juste show the string
`selectionNoWrap`	`boolean`	`false`	Force selection on one line
`showSelectAll`	`boolean`	`false`	Add an option to select all options	with `multiple`
`selectAllText`	`string`	`'Select all'`	Text when all options as not selected	with `multiple`
`removeAllText`	`string`	`'Remove all'`	Text when all options as selected	with `multiple`
`editPattern`	`(str: string) => string`	\| use it for change the pattern of the filter search
`nativeKeyboard`	`boolean`	`false`	Use the keyboard navigation like native HTML select component	not with `multiple`
`ngModel` `id` `required` `disabled` `readonly` `tabIndex`	\|	just like a `select` control
`(update)`	`(event:Select2UpdateEvent) => void`	\| triggered when user select an option
`(open)`	`(event: Select2) => void`	\| triggered when user open the options
`(close)`	`(event: Select2) => void`	\| triggered when user close the options
`(focus)`	`(event: Select2) => void`	\| triggered when user enters the component
`(blur)`	`(event: Select2) => void`	\| triggered when user leaves the component
`(search)`	`(event:Select2SearchEvent) => void`	\| triggered when search text changed	with `customSearchEnabled`
`(scroll)`	`(event:Select2ScrollEvent) => void`	\| triggered when infiniteScroll is on `up` or `down` position	with `ngx-infinite-scroll`
`(removeOption)`	`(event:Select2RemoveEvent) => void`	\| triggered when an option is removed from the list of selected options options list	with `multiple`
`(autoCreateItem)`	`(event:Select2AutoCreateEvent) => void`	\| triggered when a new item has been added	with `autoCreate`

select2 data structure

export interface Select2Group {
    /** label of group */
    label: string;
    /** options list */
    options: Select2Option[];
    /** add classes  */
    classes?: string;
    /** template id dropdown & selection if no templateSelectionId */
    templateId?: string;
    /** template data  */
    data?: any;
}

export interface Select2Option {
    /** value  */
    value: Select2Value;
    /** label of option */
    label: string;
    /** no selectable is disabled */
    disabled?: boolean;
    /** for identification */
    id?: string;
    /** add classes  */
    classes?: string;
    /** template id dropdown & selection if no templateSelectionId */
    templateId?: string;
    /** template id for selection */
    templateSelectionId?: string;
    /** template data  */
    data?: any;
    /** hide this option */
    hide?: boolean;
}

export type Select2Value = string | number | boolean | object | null | undefined;

export type Select2UpdateValue = Select2Value | Select2Value[] | undefined | null;

export type Select2Data = (Select2Group | Select2Option)[];

export interface Select2UpdateEvent<U extends Select2UpdateValue = Select2Value> {
    /** component */
    readonly component: Select2;
    /** current selected value */
    readonly value: U | null;
    /** selected option */
    readonly options: Select2Option[] | null;
}

export interface Select2AutoCreateEvent<U extends Select2UpdateValue = Select2Value> {
    /** component */
    readonly component: Select2;
    /** current selected value */
    readonly value: U;
    /** selected option */
    readonly options: Select2Option[] | null;
}

export interface Select2SearchEvent<U extends Select2UpdateValue = Select2Value> {
    /** component */
    readonly component: Select2;
    /** current selected value */
    readonly value: U | null;
    /** search text */
    readonly search: string;
    /** current data source */
    readonly data: Select2Data;
    /** method to call to update the data */
    readonly filteredData: (data: Select2Data) => void;
}

export interface Select2RemoveEvent<U extends Select2UpdateValue = Select2Value> {
    /** component */
    readonly component: Select2;
    /** current selected value */
    readonly value: U;
    /** remove */
    readonly removedOption: Select2Option;
}

export interface Select2ScrollEvent {
    /** component */
    readonly component: Select2;
    /** scroll way */
    readonly way: 'up' | 'down';
    /** search text */
    readonly search: string;
    /** current data */
    readonly data: Select2Data;
}

export type Select2SelectionOverride = string | ((params: { size: number; options: Select2Option[] | null }) => string);

export type Select2Template = TemplateRef<any> | { [key: string]: TemplateRef<any> } | undefined;

Templating

Unique template

<select2 [data]="data" [templates]="template">
    <ng-template #template let-data="data"><strong>{{data?.color}}</strong>: {{data?.name}}</ng-template>
</select2>

const data: Select2Data = [
    {
        value: 'heliotrope',
        label: 'Heliotrope',
        data: { color: 'white', name: 'Heliotrope' },
    },
    {
        value: 'hibiscus',
        label: 'Hibiscus',
        data: { color: 'red', name: 'Hibiscus' },
    },
];

Template group & option

<select2 [data]="data" [templates]="{option : option, group: group}">
    <ng-template #option let-data="data">{{data?.name}}</ng-template>
    <ng-template #group let-label="label">Group: {{label}}</ng-template>
</select2>

No difference in data structure. The template is defined by its type, option or group, automatically.

Template by templateId

<select2 [data]="data" [templates]="{template1 : template1, template2: template2}">
    <ng-template #template1 let-data="data">{{data?.name}}</ng-template>
    <ng-template #template2 let-label="label" let-data="data">{{label}} : {{data?.color}}</ng-template>
</select2>

const data: Select2Data = [
    {
        value: 'heliotrope',
        label: 'Heliotrope',
        data: { color: 'white', name: 'Heliotrope' },
        templateId: 'template1',
    },
    {
        value: 'hibiscus',
        label: 'Hibiscus',
        data: { color: 'red', name: 'Hibiscus' },
        templateId: 'template2',
    },
];

Template for change the selection

<select2 [data]="data" [templateSelection]="templateSelection">
    <ng-template #templateSelection let-data="data"><strong>{{ data?.color }}</strong> ({{ data?.name }})</ng-template>
</select2>

Possible object

TemplateRef
{template: TemplateRef}
{option?: TemplateRef, group?: TemplateRef}
{templateId1: TemplateRef, ...}

In addition to the rendering templates of options and groups, in addition to going through the templateSelection attribute, it is possible to define that of the selection :

{templateSelection: TemplateRef}
{optionSelection: TemplateRef}

Priority order

For group or option:

'id' (from item data templateId)
'group' or 'option'
'template'
TemplateRef (from html attribute templates)
Default render

For the selection:

'id' (from item data templateSelectionId)
'optionSelection'
'templateSelection'
TemplateRef (from html attribute templateSelection)
'id' (from item data templateId)
'option'
'template'
TemplateRef (from html attribute templates)
Default render

Overlay

If the overlay mode is used / activated, add to the project root in CSS (with ViewEncapsulation.None)

@import '~@angular/cdk/overlay-prebuilt.css';

CSS variables

It's possible to change different colors (and more) with CSS variables without having to modify them with ::ng-deep or other CSS rules :

:root {
    /* size */
    --select2-single-height: 28px;
    --select2-multiple-height: 28px;

    /* label */
    --select2-label-text-color: #000;
    --select2-required-color: red;

    /* selection */
    --select2-selection-border-radius: 4px;
    --select2-selection-background: #fff;
    --select2-selection-disabled-background: #eee;
    --select2-selection-border-color: #aaa;
    --select2-selection-focus-border-color: #000;
    --select2-selection-text-color: #111;
    --select2-selection-line-height: 28px;
    --select2-selection-padding: 0 0 0 8px;

    /* selection (multiple) */
    --select2-selection-multiple-gap: 2px 5px;
    --select2-selection-multiple-padding: 2px 5px;

    /* selection: choice item (multiple) */
    --select2-selection-choice-background: #e4e4e4;
    --select2-selection-choice-text-color: #000;
    --select2-selection-choice-border-color: #aaa;
    --select2-selection-choice-close-color: #999;
    --select2-selection-choice-hover-close-color: #333;

    /* placeholder */
    --select2-placeholder-color: #999;
    --select2-placeholder-overflow: ellipsis;

    /* no result message */
    --select2-no-result-color: #888;
    --select2-no-result-font-style: italic;

    /* no result message */
    --select2-too-much-result-color: #888;
    --select2-too-much-result-style: italic;

    /* reset */
    --select2-reset-color: #999;

    /* arrow */
    --select2-arrow-color: #888;

    /* dropdown panel */
    --select2-dropdown-background: #fff;
    --select2-dropdown-border-color: #aaa;
    --select2-dropdown-above-border-bottom: none;
    --select2-dropdown-above-border-bottom-left-radius: 0;
    --select2-dropdown-above-border-bottom-right-radius: 0;
    --select2-dropdown-below-border-top: none;
    --select2-dropdown-below-border-top-left-radius: 0;
    --select2-dropdown-below-border-top-right-radius: 0;

    /* overlay */
    --select2-overlay-backdrop: transparent;

    /* search field */
    --select2-search-border-color: #aaa;
    --select2-search-background: #fff;
    --select2-search-border-radius: 0px;

    /* dropdown option */
    --select2-option-text-color: #000;
    --select2-option-disabled-text-color: #999;
    --select2-option-disabled-background: transparent;
    --select2-option-selected-text-color: #000;
    --select2-option-selected-background: #ddd;
    --select2-option-highlighted-text-color: #fff;
    --select2-option-highlighted-background: #5897fb;
    --select2-option-group-text-color: gray;
    --select2-option-group-background: transparent;
    --select2-option-padding: 6px;

    /* hint */
    --select2-hint-text-color: #888;

    /* for Material ------------------------------------------*/
    --select2-material-underline: #ddd;
    --select2-material-underline-active: #5a419e;
    --select2-material-underline-disabled: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.26) 0,
        rgba(0, 0, 0, 0.26) 33%,
        transparent 0
    );
    --select2-material-underline-invalid: red;
    --select2-material-placeholder-color: rgba(0, 0, 0, 0.38);
    --select2-material-selection-background: #ddd;
    --select2-material-option-selected-background: rgba(0, 0, 0, 0.04);
    --select2-material-option-highlighted-text-color: #000;
    --select2-material-option-selected-text-color: #ff5722;
}

Publishing the library

npm run build:lib
npm run publish:lib

Update Demo

npm run build:demo

License

Like Angular, this module is released under the permissive MIT license. Your contributions are always welcome.

changelog

Changelog of ng-select2

V17.2.7 (2025-06-13)

Change

feat: track by id (add id on groups) #92
add Angular 20.0 support.

V17.2.6 (2025-05-08)

Change

fix: when multiselect change fulldata (data & value) #91 (thanks @jcompagner)

V17.2.5 (2025-04-18)

Change

fix: when data and value change at the same time

V17.2.4 (2025-04-06)

Change

fix: remove logger

V17.2.3 (2025-04-06)

Change

fix: hideSelectedItems on click option to not close the dropdown #58
fix: limitSelection when value is not an array

V17.2.2 (2025-04-05)

Change

fix: init value with formControl on init, on setValue, on reset #89

V17.2.1 (2025-03-21)

Change

fix: regression on limit to 0

V17.2.0 (2025-03-20)

Change

build: fix backward compatibility to Angular 18.1 (thanks @bborel-hvs)
feat: new attribute nativeKeyboard
feat: add accessibility for nativeKeyboard (thanks @mbelin-hvs)
feat: improve scrolling behavior in results (thanks @mbelin-hvs)
fix: multiple opening when overlay is not active

V17.1.1 (2025-02-04)

Change

Fix value when switching between single and multiple

V17.1.0 (2024-12-26)

Change

Add attribute multipleDrag: drag'n drop list of items in selection

V17.0.0 (2024-12-23)

Changes

Rewrite the component to use all the advances of Angular:
- Switch to stand-alone component mode
- Use of signals for inputs & queries
- Removed a lot of setTimeout
- Improved the overlay with the CDK
- Fix autocreate with single option
- Add resettable with multiple mode
- Fix inconsistencies in the code
- Much stricter code rewriting
Accessibility (from 15.4.0) (thanks @mbelin-hvs)
- Added/modified accessibility attributes
- New inputs for accessibility
  - title
  - ariaLabelledBy
  - ariaDescribedBy
  - ariaInvalid
  - ariaResetButtonDescription
- Improved focus/blur
- Fixed readonly
- Added reset button to tab navigation
- Keyboard interactions
  - Update
    - Escape: Improved focus after closing popup.
    - Tab: Navigates correctly when no searchbox.
  - New
    - Home: Opens popup. Goes to first option.
    - End: Opens popup. Goes to last option.
    - PageUp: Opens popup. Goes up 10 options.
    - PageDown: Opens popup. Goes down 10 options.
    - Space: Opens popup. Selects option when there is no search input.
    - Alt+Down, Alt+Up: Opens/closes popup.

Demo

New demo

V16.0.0 (2024-11-27)

Breaking Changes

minimum required support has been upgraded to Angular 19.0.

V15.4.0 (on a branch) (2024-12-18)

Changes

Added/modified accessibility attributes
New inputs for accessibility
- title
- ariaLabelledBy
- ariaDescribedBy
- ariaInvalid
- ariaResetButtonDescription
Improved focus/blur
Fixed readonly
Added reset button to tab navigation
Keyboard interactions
- Update
  - Escape: Improved focus after closing popup.
  - Tab: Navigates correctly when no searchbox.
- New
  - Home: Opens popup. Goes to first option.
  - End: Opens popup. Goes to last option.
  - PageUp: Opens popup. Goes up 10 options.
  - PageDown: Opens popup. Goes down 10 options.
  - Space: Opens popup. Selects option when there is no search input.
  - Alt+Down, Alt+Up: Opens/closes popup.

Demo

Fixed bugs
Added accessibility exemples

V15.3.0 (2024-11-16)

Changes

Add properties:
- selectionOverride: Change what is displayed in the selection area #79
- selectionNoWrap: Force selection on one line #79
- showSelectAll: Add an option to select all options c #80
- selectAllText: Text when all options as not selected #80
- removeAllText: Text when all options as selected #80
Fix labels of selected options #81

V15.2.1 (2024-08-22)

Changes

Delete a forgotten logger #75

V15.2.0 (2024-08-03)

Changes

Add templates for selection (see readme or code generator) #74

V15.1.0 (2024-08-02)

Changes

Add grid layout mode in dropdown #72
Fix init value in multiple mode #73
Fix reset value

V15.0.1 (2024-07-24)

Changes

Fix reset with multiple #69
Rewrite update event #69

V15.0.0 (2024-05-31)

Breaking Changes

minimum required support has been upgraded to Angular 18.0.

Changes

manage blur event (overlay, click on option) (thanks @bborel-hvs)

V14.0.1 (2024-03-04)

add borderless style

V14.0.0 (2024-01-07)

Breaking Changes

minimum required support has been upgraded to Angular 17.0.

V13.0.12 (on a branch) (2024-07-24)

Fix reset with multiple #69
Rewrite update event #69

V13.0.11 (on a branch) (2024-06-14)

manage blur event (overlay, click on option)

V13.0.10 (on a branch) (2024-03-04)

add borderless style

V13.0.9 (2023-09-24)

add autoCreate for single mode #56 (thanks @majora2007)
add autoCreateItem event #56 (thanks @majora2007)

V13.0.8 (2023-08-29)

fix focus on blur

V13.0.7 (2023-08-29)

fix tab navigation (don't open dropdown with tab)

V13.0.6 (2023-08-23)

fix value when data changes with NgControl

V13.0.5 (2023-08-23)

update current value when data changes

V13.0.4 (2023-08-22)

Changes

improve keyboard navigation
- fixed arrow navigation when there is no search field
- improve tab and input actions (fix when unfocus)
add CSS variables:
- --select2-selection-line-height
- --select2-selection-padding
- --select2-selection-multiple-gap
- --select2-selection-multiple-padding
- --select2-option-padding

V13.0.2 (2023-08-15)

Changes

fix customSearchEnabled

V13.0.1 (2023-07-31)

Changes

add resetSelectedValue parameter #42
fix autoCreate with no search input #49

V13.0.0 (2023-07-20)

Breaking Changes

minimum required support has been upgraded to Angular 16.1.

Changes

rewrite clickDetection
fix template with multiple
refacto with numberAttribute & booleanAttribute (Angular 16.1)

V12.1.0 (2023-07-05)

Changes

improve search event (see Select2ScrollEvent)
add data on Select2ScrollEvent

V12.0.0 (2023-06-07)

Breaking Changes

minimum required support has been upgraded to Angular 16.0.
update ngx-infinite-scroll to 16.0.0.

V11.1.0 (2023-04-15)

Breaking Changes

By default the template is now used in the selection. To revert to previous behavior use noLabelTemplate.
Code removal for IE11 and Edge

Changes

add noLabelTemplate: do not use the template in the selection, stay in text mode.
add autoCreate: gives the possibility to add elements not present in the list. #48
add CSS variables :
- --select2-single-height
- --select2-multiple-height

V11.0.0 (2023-04-06)

Breaking Changes

minimum required support has been upgraded to Angular 15.0.
update ngx-infinite-scroll to 15.0.0.

Changes

fix class select2-container--focus
add item keyboard remove (multiple)

V10.0.0 (2022-07-27)

Breaking Changes

minimum required support has been upgraded to Angular 14.0.
update ngx-infinite-scroll to 14.0.0.

V9.0.0 (2022-03-10)

Breaking Changes

minimum required support has been upgraded to Angular 13.2.
update ngx-infinite-scroll to 13.0.2.

V8.1.0 (2022-02-18)

Breaking Changes

CSS variable --select2-font-style-color renamed in --select2-too-much-font-style

Changes

add maxResults maximum results limit (0 = no limit, by default : 0).
add maxResultsMessage parameter, message when maximum results (by default : 'Too many results…')
add CSS variables:
- --select2-too-much-result-color
- --select2-too-much-result-style

Corrections

filtered data for group is now correct

V8.0.6 (2022-01-04)

Corrections

Remove × for disabled & readonly
Update data when new sets come in.

V8.0.5 (2021-09-27)

Corrections

Fix when overlay is true on start

V8.0.4 (2021-09-23)

Changes

with overlay active, the value auto for listPosition is possible

Corrections

Fix above position with overlay

V8.0.3 (2021-07-02)

Corrections

add more controls for resultContainer

V8.0.2 (2021-07-01)

Corrections

fix open event with overlay
fix ExpressionChangedAfterItHasBeenCheckedError

V8.0.1 (2021-07-01)

Corrections

fix overlay size on reopen after resize

V8.0.0 (2021-06-30)

Breaking Changes

minimum required support has been upgraded to Angular 10.0.
remove parameters material and noStyle, use styleMode.

Changes

add overlay parameter with Angular CDK, to change the display method of the dropdown list to the root of the DOM. (See README).
add noResultMessage parameter, to display a message if there is no result.
add styleMode parameter, to choose an alternative predefined style of the component.

V7.3.1 (2021-04-24)

Corrections

fix placeholder overflow (ellipsis)

V7.3.0 (2021-04-23)

Changes

add ngx-infinite-scroll support (See README)
add (removedOption) event, triggered when an option is removed from the list of selected options options list

Corrections

remove a forgotten logger

V7.2.3 (2021-03-11)

Corrections

fix crash when switching between multiple and non-multiple

Demo

add html generator

V7.2.2 (2021-03-05)

Corrections

hidden options are no longer selectable with keyboard

V7.2.1 (2021-03-04)

Changes

add a possibility to hide an option
add an argument resettable to display a reset button (in single mode)

V7.2.0 (2020-12-09)

Changes

formating options & groups with template

Corrections

crash when data is empty

V7.1.11 (2020-11-12)

Corrections

support for Angular versions up to 11

V7.1.10 (2020-11-11)

Corrections

also call markForCheck() on the change detector when the filtered values are set
support for Angular versions up to 10

V7.1.9 (2020-11-02)

Corrections

Change event is stopped for input
Fix CSS for outline
Fix infinite valueChange sometimes because of asynchronous test

V7.1.8 (2020-10-26)

Changes

change the return of these events:
- (open): void to Select2
- (close): void to Select2
- (focus): void to Select2
- (blur): void to Select2
- (search): string to Select2SearchEvent

Corrections

Fix multiple events for (update) when value changes

V7.1.7 (2020-10-19)

Corrections

Fix case with 0 in value

V7.1.6 (2020-10-13)

Changes

Added an id on the select options.
Allow to give a specific id to an option via Select2Option config.

Corrections

Remove the undefined class wrongly added to options when classes is not defined on Select2Option.

V7.1.5 (2020-10-06)

Corrections

fix update of list when value is null/undefined/empty

V7.1.4 (2020-09-18)

Changes

add limitSelection attribute to limit multiple selection. (By default 0 for no limit)

V7.1.3 (2020-05-07)

Breaking Changes

review the naming of all CSS variables and add new
no more predefined variables (it was impossible to overwrite them)

V7.1.2 (2020-04-27)

Changes

add event (focus) and (blur)

Corrections

fix the focused status which is not removed in some cases or called for the wrong reason

V7.1.1 (2020-04-24)

Changes

add event (close)

Corrections

fix dropdown position with hint

V7.1.0 (2020-04-23)

Breaking Changes

(update) : return object Select2UpdateValue change for Select2UpdateEvent object. Please, see the readme.

Changes

add CSS variables for colors (see the readme)
add new attributes : listPosition, minCharForSearch, noStyle
now, selection container use a flexbox layout (CSS symplification)
update the SearchBox status when the list change

V7.0.7 (2020-04-17)

Changes

add a new displaySearchStatus attribute
edit minCountForSearch to make it dynamic and easier to use

V7.0.6 (2020-02-21)

Corrections

fix dropdown when is close

V7.0.5 (2020-02-07)

Corrections

fix resultMaxHeight (@Output instead of @Input)

V7.0.4 (2020-02-06)

Changes

with label and required is true, add a red * after the label
add new @input parameters :
- hideSelectedItems : for multiple, remove selected values (by default : false)
- resultMaxHeight : change the height size of results (by default : 200px);

Corrections

fix value update
fix CSS for the height of result when the panel is closed

V7.0.3 (2019-11-08)

Changes

options label accept HTML content

V7.0.2 (2019-08-09)

Corrections

fix scroll when opening the select to go to the selected option(s)
fix arrowUp/arrowDown to be able to jump disabled options within the list

V7.0.1 (2019-07-29)

Corrections

fix spam issue on filteredData in some cases
refactoring the method to handle up/down arrows

V7.0.0 (2018-12-05)

Changes

update to Angular 7
add Label with <select2-label> tag

Corrections

ajust CSS
change the key detection

V6.0.3 (2018-10-29)

Correction

fix formcontrol value update

V6.0.2 (2018-10-12)

Correction

fix error when using FormControls
add new examples in the demo

V6.0.1 (2018-07-16)

Correction

fix ExpressionChangedAfterItHasBeenCheckedError

V6.0.0 (2018-07-10)

Breaking changes

not compatible anymore with Angular 5
upgrade to Angular 6 using Angular CLI
change folders architecture to match the Angular CLI ng new and ng generate library