Skip to content

lothern/ng-selectize

 
 

Repository files navigation

ng-selectize

npm version

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

  3. 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/...)
  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>

Using with SystemJS

See Issue #28

Running the demo

git pull git@github.com: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.

Packages

No packages published

Languages

  • JavaScript 79.9%
  • CSS 14.2%
  • TypeScript 5.9%