Have ideas to improve npm?Join in the discussion! »

    ng-selectize
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

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

    Install

    npm i ng-selectize

    DownloadsWeekly Downloads

    1,187

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    246 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar