-
Notifications
You must be signed in to change notification settings - Fork 198
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Renaming library to 'ngx-bootrap-multiselect'
- Loading branch information
Showing
25 changed files
with
247 additions
and
557 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,27 +1,216 @@ | ||
# Dropdown | ||
# Angular Multiselect Dropdown for Bootstrap CSS | ||
|
||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.5. | ||
Compiled for Angular 10 (Ivy disabled for backwards compatibility) | ||
|
||
## Development server | ||
Customizable multiselect dropdown in Angular(9+), TypeScript with Bootstrap css. | ||
|
||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. | ||
## Dependencies | ||
* Bootstrap CSS 3 or 4 | ||
* Font Awesome (optional) | ||
|
||
## Code scaffolding | ||
## Install | ||
|
||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. | ||
* Install with [npm](https://www.npmjs.com): `npm install ngx-bootrap-multiselect --save`. | ||
|
||
## Build | ||
## Usage | ||
|
||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. | ||
Import `MultiselectDropdown` into your @NgModule. | ||
|
||
## Running unit tests | ||
```js | ||
import { MultiselectDropdownModule } from 'ngx-bootrap-multiselect'; | ||
|
||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). | ||
@NgModule({ | ||
// ... | ||
imports: [ | ||
MultiselectDropdownModule, | ||
] | ||
// ... | ||
}) | ||
``` | ||
|
||
## Running end-to-end tests | ||
Define options in your consuming component: | ||
|
||
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). | ||
```js | ||
import { IMultiSelectOption } from 'ngx-bootrap-multiselect'; | ||
|
||
## Further help | ||
export class MyClass implements OnInit { | ||
optionsModel: number[]; | ||
myOptions: IMultiSelectOption[]; | ||
|
||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). | ||
ngOnInit() { | ||
this.myOptions = [ | ||
{ id: 1, name: 'Option 1' }, | ||
{ id: 2, name: 'Option 2' }, | ||
]; | ||
} | ||
onChange() { | ||
console.log(this.optionsModel); | ||
} | ||
} | ||
``` | ||
|
||
In your template, use the component directive: | ||
|
||
```html | ||
<ngx-bootrap-multiselect [options]="myOptions" [(ngModel)]="optionsModel" (ngModelChange)="onChange($event)"></ngx-bootrap-multiselect> | ||
``` | ||
|
||
## Customize | ||
|
||
Import the `IMultiSelectOption` and `IMultiSelectTexts` interfaces to enable/override settings and text strings: | ||
```js | ||
|
||
// Default selection | ||
optionsModel: number[] = [1, 2]; | ||
|
||
// Settings configuration | ||
mySettings: IMultiSelectSettings = { | ||
enableSearch: true, | ||
checkedStyle: 'fontawesome', | ||
buttonClasses: 'btn btn-default btn-block', | ||
dynamicTitleMaxItems: 3, | ||
displayAllSelectedText: true | ||
}; | ||
|
||
// Text configuration | ||
myTexts: IMultiSelectTexts = { | ||
checkAll: 'Select all', | ||
uncheckAll: 'Unselect all', | ||
checked: 'item selected', | ||
checkedPlural: 'items selected', | ||
searchPlaceholder: 'Find', | ||
searchEmptyResult: 'Nothing found...', | ||
searchNoRenderText: 'Type in search box to see results...', | ||
defaultTitle: 'Select', | ||
allSelected: 'All selected', | ||
}; | ||
|
||
// Labels / Parents | ||
myOptions: IMultiSelectOption[] = [ | ||
{ id: 1, name: 'Car brands', isLabel: true }, | ||
{ id: 2, name: 'Volvo', parentId: 1 }, | ||
{ id: 3, name: 'Honda', parentId: 1 }, | ||
{ id: 4, name: 'BMW', parentId: 1 }, | ||
{ id: 5, name: 'Colors', isLabel: true }, | ||
{ id: 6, name: 'Blue', parentId: 5 }, | ||
{ id: 7, name: 'Red', parentId: 5 }, | ||
{ id: 8, name: 'White', parentId: 5 } | ||
]; | ||
|
||
``` | ||
|
||
```html | ||
<ngx-bootrap-multiselect [options]="myOptions" [texts]="myTexts" [settings]="mySettings" [(ngModel)]="optionsModel"></ngx-bootrap-multiselect> | ||
``` | ||
### Settings | ||
| Setting | Description | Default Value | | ||
| -------------------- | ------------------------------------------------------------------ | ---------------- | | ||
| pullRight | Float the dropdown to the right | false | | ||
| enableSearch | Enable searching the dropdown items | false | | ||
| checkedStyle | Style of checked items one of 'checkboxes', 'glyphicon' or 'fontawesome' | 'checkboxes' | | ||
| buttonClasses | CSS classes to apply to the trigger button | 'btn btn-default' | | ||
| itemClasses | CSS classes to apply to items | '' | | ||
| containerClasses | CSS classes to apply to container div | 'dropdown-inline' | | ||
| selectionLimit | Maximum number of items that may be selected (0 = no limit) | 0 | | ||
| minSelectionLimit | Minimum number of items that may be selected | 0 | | ||
| autoUnselect | Unselect the previous selection(s) once selectionLimit is reached | false | | ||
| closeOnSelect | If enabled, dropdown will be closed after selection | false | | ||
| showCheckAll | Display the `checkAll` item to select all options | false | | ||
| showUncheckAll | Display the `uncheckAll` item to unselect all options | false | | ||
| fixedTitle | Use the default title (do not apply the dynamic title) | false | | ||
| dynamicTitleMaxItems | The maximum number of options to display in the dynamic title | 3 | | ||
| maxHeight | The maximum height for the dropdown (including unit) | '300px' | | ||
| displayAllSelectedText | Display the `allSelected` text when all options are selected | false | | ||
| searchRenderLimit | If `enableSearch=true` and total amount of items more then `searchRenderLimit` (0 - No limit) then render items only when user typed more then or equal `searchRenderAfter` charachters | 0 | | ||
| searchRenderAfter | Amount of characters to trigger rendering of items | 1 | | ||
| searchMaxLimit | If more than zero will render only first N options in search results | 0 | | ||
| searchMaxRenderedItems | Used with searchMaxLimit to further limit rendering for optimization. Should be less than searchMaxLimit to take effect | 0 | | ||
| displayAllSelectedText | Display the `allSelected` text when all options are selected | false | | ||
| closeOnClickOutside | Close dropdown when clicked outside | true | | ||
| isLazyLoad | An event, ```onLazyLoad```, triggers on scrolling to a specified distance from the bottom of the dropdown, allowing additional data to load | false | | ||
| loadViewDistance | Distance from bottom of dropdown to trigger lazy load, in units of dropdown viewport height | 1 | | ||
| stopScrollPropagation | Scrolling the dropdown will not overflow to document | false | | ||
| selectAddedValues | Additional lazy loaded ```Select All``` values are checked when added on scrolling | false | | ||
| ignoreLabels | Ignore label options when counting selected options | false | | ||
| maintainSelectionOrderInTitle | The title will show selections in the order they were selected | false | | ||
| focusBack | Set the focus back to the input control when the dropdown closed | true | | ||
|
||
### Texts | ||
| Text Item | Description | Default Value | | ||
| --------------------- | ------------------------------------------ | ---------------- | | ||
| checkAll | The text for the "check all" option | 'Check all' | | ||
| uncheckAll | The text for the "uncheck all" option | 'Uncheck all' | | ||
| checked | Text for "checked" with single item selected (used in dynamic title) | 'checked' | | ||
| checkedPlural | Text for "checked" with multiple items selected (used in dynamic title) | 'checked' | | ||
| searchPlaceholder | Text initially displayed in search input | 'Search...' | | ||
| defaultTitle | Title displayed in button before selection | 'Select' | | ||
| allSelected | Text displayed when all items are selected (must be enabled in options) | 'All selected' | | ||
| searchEmptyResult | Text displayed when no items are rendered | 'Nothing found...' | | ||
| searchNoRenderText | Text displayed when items rendering disabled by the `searchRenderLimit` option | 'Type in search box to see results...' | | ||
|
||
## Other examples | ||
|
||
### Single select | ||
Although this dropdown is designed for multiple selections, a common request is to only allow a single selection without requiring the user to unselect their previous selection each time. This can be accomplished by setting selectionLimit to 1 and autoUnselect to true. | ||
``` | ||
{ | ||
... | ||
selectionLimit: 1, | ||
autoUnselect: true, | ||
... | ||
} | ||
``` | ||
|
||
### Lazy Loading | ||
|
||
This Stackblitz link demonstrates an implementation of lazy loading: [Lazy loading Stackblitz](https://stackblitz.com/edit/angular-oqhzcv?embed=1&file=src/app/app.component.ts) | ||
|
||
If using search during lazy load, the search term must be supplied to the back end to return the appropriate number of results. Standard inline search will not work, since the front end does not know how many items to load to retrieve the desired number of matches. | ||
|
||
If ```selectAddedValues``` is set to ```true``` for lazy loading, all values loaded to the checklist are checked when matching ```Select All``` criteria. If a search is used with ```Select All```, each search is added to a collection to be matched against when scrolling in. If ```selectAddedValues``` is false, only presently viewed matches will check on ```Select All```. | ||
|
||
If a user searches countries on ```al``` and clicks ```Select All```, all matches will be selected as they load in on scrolling. If the user clears the search box, only matches to ```al``` will select upon scrolling in all country values. | ||
|
||
If the user then searches ```an``` and clicks ```Select All```, all matches to ```an``` and ```al``` will select upon scrolling in. If the user then clicks ```Unselect All``` while ```an``` is the search criteria, all matches to ```an``` will clear, except those that match ```al```, which is still stored. | ||
|
||
Clicking ```Select All``` or ```Unselect All``` with no search criteria present will clear all previously stored searches. Any search match that is manually unchecked will remain unchecked unless matched by a new search ```Select All```. | ||
|
||
The implementor will be responsible for completing checks when the form is submitted. This could possibly either consist of completing the load of all lazy load checklists before submitting or sending checked items and search criteria to a back-end api to complete. | ||
|
||
### Use model driven forms with ReactiveFormsModule: | ||
|
||
```js | ||
import { IMultiSelectOption } from 'ngx-bootrap-multiselect'; | ||
|
||
export class MyClass implements OnInit { | ||
myOptions: IMultiSelectOption[] = [ | ||
{ id: 1, name: 'Option 1' }, | ||
{ id: 2, name: 'Option 2' }, | ||
]; | ||
|
||
ngOnInit() { | ||
this.myForm = this.formBuilder.group({ | ||
optionsModel: [1, 2], // Default model | ||
}); | ||
|
||
this.myForm.controls['optionsModel'].valueChanges | ||
.subscribe((selectedOptions) => { | ||
// changes | ||
}); | ||
} | ||
} | ||
``` | ||
|
||
```html | ||
<form [formGroup]="myForm"> | ||
<ngx-bootrap-multiselect [options]="myOptions" formControlName="optionsModel"></ngx-bootrap-multiselect> | ||
</form> | ||
``` | ||
|
||
## Developing | ||
|
||
Pull requests are welcome! | ||
|
||
## License | ||
|
||
[MIT] |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,48 +1,23 @@ | ||
{ | ||
"name": "dropdown", | ||
"version": "0.0.0", | ||
"scripts": { | ||
"ng": "ng", | ||
"start": "ng serve", | ||
"build-lib": "ng build ngx-dropdown-multiselect --prod", | ||
"test": "ng test", | ||
"lint": "ng lint", | ||
"e2e": "ng e2e" | ||
"name": "ngx-bootrap-multiselect", | ||
"version": "2.0.0", | ||
"description": "Customizable multiselect dropdown in Angular 2 with bootstrap css.", | ||
"repository": { | ||
"type": "git", | ||
"url": "git+https://github.com/softsimon/ngx-bootrap-multiselect.git" | ||
}, | ||
"private": true, | ||
"dependencies": { | ||
"@angular/animations": "~10.0.6", | ||
"@angular/common": "~10.0.6", | ||
"@angular/compiler": "~10.0.6", | ||
"@angular/core": "~10.0.6", | ||
"@angular/forms": "~10.0.6", | ||
"@angular/platform-browser": "~10.0.6", | ||
"@angular/platform-browser-dynamic": "~10.0.6", | ||
"@angular/router": "~10.0.6", | ||
"rxjs": "~6.5.5", | ||
"tslib": "^2.0.0", | ||
"zone.js": "~0.10.3" | ||
"keywords": [ | ||
"angular", | ||
"dropdown", | ||
"multi select" | ||
], | ||
"license": "MIT", | ||
"peerDependencies": { | ||
"@angular/common": "^10.0.6", | ||
"@angular/core": "^10.0.6", | ||
"@angular/forms": "^10.0.6" | ||
}, | ||
"devDependencies": { | ||
"@angular-devkit/build-angular": "~0.1000.5", | ||
"@angular-devkit/build-ng-packagr": "~0.1000.5", | ||
"@angular/cli": "~10.0.5", | ||
"@angular/compiler-cli": "~10.0.6", | ||
"@types/node": "^12.11.1", | ||
"@types/jasmine": "~3.5.0", | ||
"@types/jasminewd2": "~2.0.3", | ||
"codelyzer": "^6.0.0", | ||
"jasmine-core": "~3.5.0", | ||
"jasmine-spec-reporter": "~5.0.0", | ||
"karma": "~5.0.0", | ||
"karma-chrome-launcher": "~3.1.0", | ||
"karma-coverage-istanbul-reporter": "~3.0.2", | ||
"karma-jasmine": "~3.3.0", | ||
"karma-jasmine-html-reporter": "^1.5.0", | ||
"ng-packagr": "^10.0.0", | ||
"protractor": "~7.0.0", | ||
"ts-node": "~8.3.0", | ||
"tslint": "~6.1.0", | ||
"typescript": "~3.9.5" | ||
"dependencies": { | ||
"tslib": "^2.0.0" | ||
} | ||
} | ||
} |
Oops, something went wrong.