ng-selectize

Angular (2,4,...) component for selectize.js

Hosted Example Site

Including within existing angular-cli project

1. npm i --save ng-selectize jquery selectize

2. Add the following to the styles array within angular.json:

      
   "node_modules/selectize/dist/css/selectize.css",
   "node_modules/selectize/dist/css/selectize.{your chosen theme}.css" // eg: .../selectize.bootstrap3.css
   // (a semantic-ui theme has been added to node_modules/ng-selectize/assets/selectize.semantic.css if needed)

3. Add the following to the scripts array within angular.json

   "node_modules/jquery/dist/jquery.min.js",
   "node_modules/ng-selectize/assets/selectize.standalone.js" // (or take from node_modules/selectize/dist/js/standalone/selectize.min.js)

4. Import module within applicable @NgModule:

   import {NgSelectizeModule} from 'ng-selectize';
   imports: [..., NgSelectizeModule, ...],

5. Use within template: <ng-selectize [config]="..." [options] = "..." {other-attributes}></ng-selectize>

Running the demo

git pull [email protected]:NicholasAzar/ng-selectize-demo.git
cd ng-selectize-demo
npm i
npm start
// navigate to localhost:4200

Docs

The 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.

Attributes

| 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 |

Included Selectize Plugins

| Name | Options | Description | | --- | --- | --- | | dropdown_direction | {'auto', 'up', 'down'} | Control the direction in which the dropdown opens. |