ng2-iq-select2
Angular 2 native select 2 implementation based on bootstrap 3
- Easily filter on a remote webservice (can be used with a local list too)
- Works with ids or complete entities
- Single or multiple modes
- Forms integration
- MIT License
Usage example:
app.module.ts
;
html file
html file (custom template)
[{{item.code}}] {{item.name}}
Exposed internal variable to bind
$item
,$entity
,$id
,$index
example typescript file
;
IqSelect2Item
interface IqSelect2Item id: string; text: string; entity?: any; // only needed when referenceMode === 'entity'
Messages
static readonly PARTIAL_COUNT_VAR; // Variable to be replaced by the amount of results being shown static readonly TOTAL_COUNT_VAR; // Variable to be replaced by the total count of results moreResultsAvailableMsg?: string; noResultsAvailableMsg?: string;
Configuration options (Inputs and Outputs)
@Input() dataSourceProvider: (term: string) => Observable<IqSelect2Item[]>: the function to get the data based on user input
@Input() selectedProvider: (ids: string[]) => Observable<IqSelect2Item[]>: the function to get previously selected data when referenceMode === 'id'
@Input() iqSelect2ItemAdapter: (entity: T) => IqSelect2Item: the function to adapt any entity to a IqSelect2Item
@Input() referenceMode: 'id' | 'entity'. Allows to specify if you need the whole entity or just the id.
@Input() multiple: 'true' | 'false'. Allows to select multiple options from the list. The form value is returned as an array.
@Input() clientMode: 'true' | 'false'. If set to true only one request will be sent to the data provider and subsequent searching will happen on the client.
@Input() searchDelay: ms until request is effectively triggered
@Input() placeholder: text to show until a search is performed
@Input() disabled: boolean to control the disabled state of the component
@Input() minimumInputLength: the minimum input length at which the component will request data to the provider
@Input() resultsCount: total count of results produced after entering the search term. A message suggesting further filtering will appear if the results count is greather than the result list shown
@Input() messages: Messages: class to provide custom messages to the component
@Input() css: css classes to be applied
@Input() searchIcon: css icon on the right of the input
@Input() deleteIcon: css icon to be used to remove selected option (In single mode)
+@Input() allowAddingNewItems: flag to control whether a user can type in a search term that is not in the result list
+@Input() caseSensitiveSelection: flag to control whether user-entered options are compared in a case-sensitive manner
@Output() onSelect(item: IqSelect2Item): event triggered when an item is selected
@Output() onRemove(item: IqSelect2Item): event triggered when an item is removed
Reference mode examples
// form.value example with referenceMode === 'id': 'item': 1 // form.value example with referenceMode === 'entity': 'item': 'id': 1 'property1': 'value' ... // form.value example with referenceMode === 'id' and multiple === 'true': 'item': 123 // form.value example with referenceMode === 'entity' and multiple === 'true': 'item': 'id': 1 'property1': 'value' ... 'id': 2 'property1': 'value2' ... 'id': 3 'property1': 'value3' ...