Angular (2,4,...) component for selectize.js
-
npm i --save ng-selectize jquery selectize -
Add the following to the styles array within
.angular-cli.json:"../node_modules/selectize/dist/css/selectize.css", "../node_modules/selectize/dist/css/selectize.{your chosen theme}.css"
(the semantic-ui theme has been added to ng-selectize/selectize/selectize.semantic.css if needed)
-
Add the following to the scripts array within
.angular-cli.json"../node_modules/jquery/dist/jquery.min.js", "../node_modules/ng-selectize/selectize/selectize.standalone.js" (or take from /node_modules/selectize/...)
-
Import module within applicable
@NgModule:import {NgSelectizeModule} from 'ng-selectize'; imports: [..., NgSelectizeModule, ...],
-
Use within template:
<ng-selectize [config]="..." [options] = "..." {other-attributes}></ng-selectize>
See Issue #28
git pull git@github.com:NicholasAzar/ng-selectize-demo.git
cd ng-selectize-demo
npm i
npm start
// navigate to localhost:4200The docs directory within this repo is the result of ng build --prod --aot from the ng-selectize-demo repository. It can be accessed from the hosted example site above.
| Attribute | Type | Default | Description | Implemented |
|---|---|---|---|---|
| config | Object | null | Selectize config | Yes |
| options | Array | null | Available options to select from | Yes |
| placeholder | String | '' | Placeholder text to be displayed. Is overridden if hasOptionsPlaceholder/noOptionsPlaceholder are non-null | Yes |
| noOptionsPlaceholder | String | '' | Placeholder text to be displayed when no options are available | Yes |
| hasOptionsPlaceholder | String | '' | Placeholder text to be displayed when options are available | Yes |
| enabled | Boolean | true | Enables the input field when true, disabled otherwise | Yes |
| formControl | FormControl | null | Form control field to be used to set value and/or validation. | Yes |
| errorClass | String | 'has-error' | CSS Class to be added to the field when | Yes |
| optionGroups | Object | null | Organize options within groups | Yes |
| Name | Options | Description |
|---|---|---|
| dropdown_direction | {'auto', 'up', 'down'} | Control the direction in which the dropdown opens. |