Select module for angular 2-4
DEMO
Usage in an existing angular cli project
- Install via npm
npm install @halaz.lazlo/ngx-select --save
- Import module
// src/app/app.module.ts
import { NgxSelectModule } from '@halaz.lazlo/ngx-select';
imports: [..., NgxSelectModule, ...]
- Use
<lib-ngx-select [options]="..." [(model)]="..."></lib-ngx-select>
Attribute |
Type |
Default |
Description |
[(model)] |
any |
undefined |
the ngModel |
[options] |
object[] |
undefined |
The options shown in dropdown |
[valueField] |
string |
value |
The value field of option |
[labelField] |
string |
label |
The label field of option |
[isMultiple] |
boolean |
false |
Multiselect |
[allowAdd] |
boolean |
false |
Allows adding new option |
[isObjectValue] |
boolean |
false |
Sets the model the whole option object |
[maxItems] |
number |
undefined |
If multiple, how many items can be added to array |
[isLoading] |
boolean |
false |
Is waiting for async call, a spinner is visible |
[placeholder] |
string |
undefined |
The placeholder |
[dropdownDirection] |
['up', 'down'] |
down |
Which direction the dropdown opens |
[noOptionAvailableMsg] |
string |
No options available, try searching... |
When options is empty or not defined |
[noFilterResultsMsg] |
string |
No results |
The message shown when no filtered result is found |
[allOptionSelectedMsg] |
string |
All options have been selected |
All options have been selected |
[addOptionMsg] |
string |
Add {{input}}... |
The message when isMultiple === true, the {{input}} is replaced with the value in the input |
[mobileBreakpoint] |
number |
768 |
isMobile = screen.width < mobileBreakpoint |
Event |
Returns |
Description |
(modelChange) |
object |
The changed model |
(inputChange) |
string |
When the filter input text changes |
(dropdownOpen) |
null |
Dropdown open |
(dropdownClose) |
null |
Dropdown close |