https://github.com/bugsplat-git/ngb-filterable-dropdown
⚡️🥾🔌 Powerful ng-bootstrap dropdown control for complicated filtering.
https://github.com/bugsplat-git/ngb-filterable-dropdown
angular bootstrap bugsplat dropdown filter ng-bootstrap
Last synced: over 1 year ago
JSON representation
⚡️🥾🔌 Powerful ng-bootstrap dropdown control for complicated filtering.
- Host: GitHub
- URL: https://github.com/bugsplat-git/ngb-filterable-dropdown
- Owner: BugSplat-Git
- License: mit
- Created: 2020-03-20T22:51:19.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2025-02-13T22:20:48.000Z (over 1 year ago)
- Last Synced: 2025-02-13T22:32:41.730Z (over 1 year ago)
- Topics: angular, bootstrap, bugsplat, dropdown, filter, ng-bootstrap
- Language: TypeScript
- Homepage: https://bugsplat-git.github.io/ngb-filterable-dropdown-example
- Size: 3.46 MB
- Stars: 0
- Watchers: 4
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://bugsplat.com)
#
BugSplat
### **Crash and error reporting built for busy developers.**
## 👋 Introduction
BugSplat's [@bugsplat/ngb-filterable-dropdown](https://www.npmjs.com/package/@bugsplat/ngb-filterable-dropdown) package provides a powerful dropdown control for complicated filtering. Take a peek our [example](https://bugsplat-git.github.io/ngb-filterable-dropdown-example/) that demonstrates how to filter and select various items in a collection.
## 🏗 Installation
Install `@bugsplat/ngb-filterable-dropdown` and the associated peer dependencies [@bugsplat/ng-bootstrap](https://ng-bootstrap.github.io/#/home) and [Bootstrap](https://getbootstrap.com/):
`npm i @bugsplat/ngb-filterable-dropdown @bugsplat/ng-bootstrap bootstrap`
## 🏃 Usage
Add `NgbFilterableDropdownModule` to your `NgModule` imports for each module where you plan to use the filterable dropdown:
```ts
import { NgbFilterableDropdownModule } from '@bugsplat/ngb-filterable-dropdown'
@NgModule({
...
imports: [
NgbFilterableDropdownModule
],
...
})
```
Add `ngb-filterable-dropdown` to your component's template:
```html
```
## 🧩 API
Customize your dropdown by leveraging the inputs and outputs of `@bugsplat/ngb-filterable-dropdown` as described below.
### Selection
The component takes two main inputs, a list of strings that are selectable and a sub-list of strings that are already selected.
```ts
items: Array = ['Beetle', 'Ant', 'Moth', 'Fire Ant', 'Dung Beetle', 'Grass Ant'];
selection: Array = ['Moth'];
```
### Selection Modes
You can also specify whether or not to allow multiple items to be selected. By default, the component allows one item to be selected.
```ts
selectionMode: NgbFilterableDropdownSelectionMode =
NgbFilterableDropdownSelectionMode.SingleSelect;
```
### Create New Items
You can specify whether or not to allow new items to be created. By default, the component does not allow new items to be created.
```ts
allowCreateItem: boolean = false;
```
### Opening and Closing
The open/close behavior of the dialog can be changed by setting `autoClose` to `true` or `false`. Alternatively you can specify whether to close on an `outside` or `inside` click.
```ts
autoClose: boolean | 'inside' | 'outside' = false;
```
### Disabling
Dropdowns can be disabled at any time by setting `disabled` to `true`.
```ts
disabled: boolean = false;
```
### Loading
You can also display a loading placeholder by setting `loading` to `true`.
```ts
loading: boolean = false;
```
### Placeholders
If you'd like to specify the placeholder in the search input you can set the value of searchInputPlaceholder to a string of your choosing.
```ts
placeholder: string = 'No Items Selected';
searchInputPlaceholder: string = 'Search';
```
### Outputs
The component provides the selected data back to the parent through the selectionChanged event.
```ts
onSelectionChanged(event: SelectionChangedEvent) {
const selection = event.selection;
}
```
When an item is created the component outputs an event with the properties created, items, and selection.
```ts
onItemCreated(event: ItemCreatedEvent) {
const created = event.created;
const selection = event.selection;
const items = event.items;
}
```
The component also provides an event when the dropdown is opened or closed through the openChanged event.
```ts
onOpenChanged(event: OpenChangedEvent) {
const open = event.open;
}
```
## 🐛 About
[@bugsplat/ngb-filterable-dropdown](https://github.com/BugSplat-git/ngb-filterable-dropdown) is an open source library developed by [BugSplat](https://www.bugsplat.com/)! BugSplat is a crash and error reporting tool used by developers to find, fix, and track errors in their applications.
If you're interested in error reporting, check out our [Angular](https://www.bugsplat.com/docs/sdk/angular/) integration.
With :heart:
BugSplat