[Documentation]

Customize from [angular2-multiselect-dropdown] (https://www.npmjs.com/package/angular2-multiselect-dropdown)

Features

##### 1. Template Driven Forms support
##### 2. Reactive Forms support
##### 3. Settings configuration
##### 4. Callbacks and events
##### 5. Lazy lodaing - handle large data lists
##### 6. Group By feature
##### 7. Search filter for both plain list and grouped list
##### 8. Allow both group and single data in single dropdown also allow searching functionality for both.

$3

npm install techhive-multiselect-dropdown

- Once installed import TechhiveMultiSelectModule from the installed package into your module as follows:

$3

Import TechhiveMultiSelectModule into NgModule in app.module.ts
``js
import { TechhiveMultiSelectModule } from 'techhive-multiselect-dropdown/angular2-multiselect-dropdown';

@NgModule({
// ...
imports: [
TechhiveMultiSelectModule,
]
// ...
})

`

Declare the component data variables and options in your component where you want to consume the dropdown component.

`js

import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
ngOnInit(){
this.dropdownList = [
{ 'id': 1, 'name': 'Java' },
{ 'id': 2, 'name': 'Angular' },
{ 'id': 3, 'name': 'PHP' },
{ 'id': 4, 'name': 'WordPress' },
{ 'id': 5, 'name': 'Node.js' },
{ 'id': 6, 'name': 'Android' },
{ 'id': 7, 'name': 'IOS' },
{ 'id': 8, 'name': 'Magento' },
{ 'id': 9, 'name': 'Codeigniter' },
{ 'id': 10, 'name': 'Python' }
];
this.selectedItems = [1,2,3,5];
this.dropdownSettings = {
singleSelection: false,
text:"Select languages",
selectAllText:'Select All',
unSelectAllText:'UnSelect All',
enableSearchFilter: true,
classes:"myclass custom-class",
maxHeight : '100',
lazzyLoading : true,
allowClear : true
};
}
onItemSelect(item:any){
console.log(item);
console.log(this.selectedItems);
}
OnItemDeSelect(item:any){
console.log(item);
console.log(this.selectedItems);
}
onSelectAll(items: any){
console.log(items);
}
onDeSelectAll(items: any){
console.log(items);
}
}
`

Add the following component tag in you template
`html
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)">

`

$3

`html



{{item.name}}

Capital - {{item.capital}}




`

$3

`html



{{item.name}}





`

$3

`html

Skills
[settings]="settings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)" name="skills">

`

`js

formModel = {
name: '',
email: 'ascasc@aa.com',
skills: [{ "id": 1, "name": "Angular" }]
};

`

$3

`html

Skills
[settings]="settings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)" formControlName="skills">

`

`js
userForm: FormGroup;
this.userForm = this.fb.group({
name: '',
email: ['', Validators.required],
skills: [[], Validators.required]
});

`

$3

The following list of settings are supported by the component. Configure the settings to meet your requirement.

| Setting |Type | Description | Default Value |
|:--- |:--- |:--- |:--- |
| singleSelection | Boolean | To set the dropdown for single item selection only. | false |
| text | String | Text to be show in the dropdown, when no items are selected. | 'Select' |
| enableCheckAll | Boolean | Enable the option to select all items in list | false |
| selectAllText | String | Text to display as the label of select all option | Select All |
| unSelectAllText | String | Text to display as the label of unSelect option | UnSelect All |
| enableSearchFilter | Boolean | Enable filter option for the list. | false |
| maxHeight | Number | Set maximum height of the dropdown list in px. | 300 |
| badgeShowLimit | Number | Limit the number of badges/items to show in the input field. If not set will show all selected. | All |
| classes | String | Custom classes to the dropdown component. Classes are added to the dropdown selector tag. To add multiple classes, the value should be space separated class names.| '' |
| limitSelection | Number | Limit the selection of number of items from the dropdown list. Once the limit is reached, all unselected items gets disabled. | none |
| disabled | Boolean | Disable the dropdown | false |
| allowClear | Boolean | If allow clear is false, it will not allow to deselect item when selected item has only 1 item | true |
| searchPlaceholderText | String | Custom text for the search placeholder text. Default value would be 'Search' | 'Search' |
| groupBy | String | Name of the field by which the list should be grouped. | none |
| searchAutofocus | Boolean | Autofocus search input field| true |
| labelKey | String | The property name which should be rendered as label in the dropdown| name |
| primaryKey | String | The property by which the object is identified. Default is 'id'.| id |
| position | String | Set the position of the dropdown list to 'top' or 'bottom'| bottom |

$3

- onSelect - Return the selected item on selection.
Example : (onSelect)="onItemSelect($event)"
- onDeSelect - Return the un-selected item on un-selecting.
Example : (onDeSelect)="OnItemDeSelect($event)"
- onSelectAll - Return the list of all selected items.
Example : (onSelectAll)="onSelectAll($event)"
- onDeSelectAll - Returns an empty array.
Example : (onDeSelectAll)="onDeSelectAll($event)"
- onOpen - Callback method fired after the dropdown opens
Example : (onOpen)="onOpen($event)"
- onClose - Callback method, fired when the dropdown is closed
Example : (onClose)="onClose($event)"

Run locally

- Clone the repository or downlod the .zip,.tar files.
- Run npm install
- Run ng serve for a dev server
- Navigate to http://localhost:4200/`