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
- 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
npm install nb-choices
yarn add nb-choices
@import '~nb-choices/nb-choices.scss'
<choices [formControl]="control"
[choices]="options"
placeholder="Choose..."></choices> <choices [formControl]="control"
[isCombo]="true"
[choices]="options"
placeholder="Choose..."></choices>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>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>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><choices [isMultiple]="true"
[choices]="options"
[isCombo]="true"
[formControl]="control"
placeholder="Choose skills..."></choices><choices [isMultiple]="true"
[choices]="options"
[withCheckbox]="true"
[isCombo]="true"
[formControl]="control"
placeholder="Choose skills..."></choices><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><choices [text]="true" [items]="textOptions" [formControl]="controText" #choicesText="choices"></choices>
<button (click)="choicesText.clearMultiple()">Reset</button>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 }}]| @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 |
You can customize the style by modifying the nb-choices.scss and include it in your application.
- Add Tests
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent