1.1.3 • Published 4 years ago

ng-selectize-v2 v1.1.3

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

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

AttributeTypeDefaultDescriptionImplemented
configObjectnullSelectize configYes
optionsArraynullAvailable options to select fromYes
placeholderString''Placeholder text to be displayed. Is overridden if hasOptionsPlaceholder/noOptionsPlaceholder are non-nullYes
noOptionsPlaceholderString''Placeholder text to be displayed when no options are availableYes
hasOptionsPlaceholderString''Placeholder text to be displayed when options are availableYes
enabledBooleantrueEnables the input field when true, disabled otherwiseYes
formControlFormControlnullForm control field to be used to set value and/or validation.Yes
errorClassString'has-error'CSS Class to be added to the field whenYes
optionGroupsObjectnullOrganize options within groupsYes

Included Selectize Plugins

NameOptionsDescription
dropdown_direction{'auto', 'up', 'down'}Control the direction in which the dropdown opens.