📢 Angular Choices

Angular wrapper for choices.js - vanilla, lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.

Live Demo - https://stackblitz.com/edit/nb-choices

🍭 Features

• Angular forms support
• Custom Angular templates
• Placeholder support out of the box
• Works with observables and the async pipe
• Custom checkbox in multiple dropdowns
• Escaping your HTML out of the box
• Modern styling

Installation

npm install nb-choices
yarn add nb-choices

Style

@import '~nb-choices/nb-choices.scss'

Examples

Single Select

<choices [formControl]="control"
         [choices]="options"
         placeholder="Choose..."></choices>

Single Select - Combo box

 <choices [formControl]="control"
          [isCombo]="true"
          [choices]="options"
          placeholder="Choose..."></choices>

Single Select - Group

this.options = [{
  label: 'Group one',
  id: 1,
  choices: [
    { value: 'Child One', label: 'Child One' },
    { value: 'Child Two', label: 'Child Two' },
  ]
 },
 {
   label: 'Group two',
   id: 2,
   choices: [
     { value: 'Child Four', label: 'Child Three' },
     { value: 'Child Five', label: 'Child Four' },
   ]
}];

<choices [formControl]="control"
         [choices]="options"
         placeholder="Choose..."></choices>

With Custom Template

this.options = [{
      value: 'chrome',
      label: 'Chrome',
      customProperties: {
        icon: 'chrome'
      }
    },
    {
      value: 'explorer',
      label: 'Explorer',
      customProperties: {
        icon: 'internet-explorer'
    }
 }];

<ng-template #tpl let-data>
 <i class="fa fa-{{data.customProperties?.icon}}"></i> {{data.label}}
</ng-template>

<choices [formControl]="control"
         [isCombo]="true"
         [choiceTemplate]="tpl"
         [choices]="options"
         placeholder="Choose..."></choices>

With Observables

ngOnInit() {
  this.loading = true;
  this.options$ = timer(500).mapTo(this.options).do(() => {
    this.loading = false
  });
}

<choices [formControl]="control"
         [isCombo]="true"
         [loading]="loading"
         [choices]="options$ | async"
         placeholder="Choose..."></choices>

Multiple Select

<choices [isMultiple]="true"
         [choices]="options"
         [isCombo]="true"
         [formControl]="control"
         placeholder="Choose skills..."></choices>

Multiple Select - With Checkbox

<choices [isMultiple]="true"
         [choices]="options"
         [withCheckbox]="true"
         [isCombo]="true"
         [formControl]="control"
         placeholder="Choose skills..."></choices>

Controls

<choices [formControl]="control"
         [isCombo]="true"
         #choices="choices"
         [choices]="options"
         placeholder="Choose..."></choices>

<button (click)="choices.toggleDropdown(true)">Show</button>
<button (click)="choices.toggleDropdown()">Hide</button>
<button (click)="choices.disable()">Disable</button>
<button (click)="choices.enable()">Enable</button>
<button (click)="choices.clear()">Reset</button>
<button (click)="choicesMultiple.clearMultiple()">Reset multiple select</button>

Text

<choices [text]="true" [items]="textOptions" [formControl]="controText" #choicesText="choices"></choices>

<button (click)="choicesText.clearMultiple()">Reset</button>

Configuration

The default configurations of nb-choices for selects are:

{
  placeholderValue: context.placeholder,
  searchEnabled: context.isCombo,
  searchPlaceholderValue: context.searchPlaceholder,
  silent: true,
  removeItems: true,
  removeItemButton: true,
  duplicateItems: false,
  resetScrollPosition: false,
  searchResultLimit: 10000,
  fuseOptions: {
    threshold: 0.2,
  },
  shouldSort: false,
  shouldSortItems: false,
  renderSelectedChoices: 'always',
  loadingText: 'Loading...',
  noResultsText: 'No results found',
  noChoicesText: 'No choices to choose from',
  itemSelectText: '',
}

The default configurations of nb-choices for texts are:

{
  duplicateItems: false,
  removeItemButton: true,
}

You can extend the configurations by providing the CHOICES_CONFIG provider for selects or the CHOICES_TEXT_CONFIG for texts.

For example:

providers: [{provide: CHOICES_CONFIG, useValue: { removeItems: false }}]

Options

| @Inputs() | Description | Default | |-------------------|-------------------------------------------------|-------------| | isMultiple | Whether the select should be multiple | false | | placeholder | The value to show when the control is empty | Choose.. | | isCombo | Whether to show the search box | true | | text | Whether is a text type | false | | searchPlaceholder | The value to show on the search input | Search.. | | labelKey | The label which bound to the option text | label | | valueKey | The value which bound to the option value | value | | choices | The list of choices | [] | | items | The list of items (relevant for text) | [] | | choiceTemplate | TemplateRef that will replace the default view | null | | loadingText | The loading text | Loading.. | | textConfig | The text config | {} | | withCheckbox | Whether to show a checkbox in multiple dropdown | false | | loading | Whether to show the loading text | false |

| @Outputs() | Description | |------------|-------------------------------------------------------------| | onSearch | Triggered when a user types into an input to search choices |

Custom Styling

You can customize the style by modifying the nb-choices.scss and include it in your application.

TODO

• Add Tests