https://github.com/netanelbasal/nb-choices
Angular wrapper for choices.js, vanilla, lightweight, configurable select box/text input plugin
https://github.com/netanelbasal/nb-choices
angular checkbox choice custom dropdown multiselect select tags vanilla
Last synced: 7 months ago
JSON representation
Angular wrapper for choices.js, vanilla, lightweight, configurable select box/text input plugin
- Host: GitHub
- URL: https://github.com/netanelbasal/nb-choices
- Owner: NetanelBasal
- License: mit
- Created: 2018-01-05T07:41:46.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-23T19:58:49.000Z (over 7 years ago)
- Last Synced: 2025-03-01T02:41:22.895Z (8 months ago)
- Topics: angular, checkbox, choice, custom, dropdown, multiselect, select, tags, vanilla
- Language: TypeScript
- Homepage: https://joshuajohnson.co.uk/Choices/
- Size: 1.12 MB
- Stars: 32
- Watchers: 3
- Forks: 7
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 📢 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
```html
```
#### Single Select - Combo box
```html
```
#### Single Select - Group
```ts
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' },
]
}];
```
```html
```
#### With Custom Template
```ts
this.options = [{
value: 'chrome',
label: 'Chrome',
customProperties: {
icon: 'chrome'
}
},
{
value: 'explorer',
label: 'Explorer',
customProperties: {
icon: 'internet-explorer'
}
}];
```
```html
{{data.label}}
```
#### With Observables
```ts
ngOnInit() {
this.loading = true;
this.options$ = timer(500).mapTo(this.options).do(() => {
this.loading = false
});
}
```
```html
```
#### Multiple Select
```html
```
#### Multiple Select - With Checkbox
```html
```
#### Controls
```html
Show
Hide
Disable
Enable
Reset
Reset multiple select
```
#### Text
```html
Reset
```
#### Configuration
The default configurations of `nb-choices` for selects are:
```ts
{
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:
```ts
{
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:
```ts
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