Awesome Open Source
Awesome Open Source

📢 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

Demo

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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (11,218
angular (1,296
custom (115
dropdown (94
select (93
tags (74
vanilla (58
checkbox (45
multiselect (21