[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.

Installation

`npm install techhive-multiselect-dropdown`

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

Usage

Import TechhiveMultiSelectModule into NgModule in app.module.ts

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.

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

<techhive-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
    [settings]="dropdownSettings" 
    (onSelect)="onItemSelect($event)" 
    (onDeSelect)="OnItemDeSelect($event)"
    (onSelectAll)="onSelectAll($event)"
    (onDeSelectAll)="onDeSelectAll($event)"></techhive-multiselect>

Template - For custom html of menu item

<techhive-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
  <c-item>
          <ng-template let-item="item">
            <label style="color: #333;min-width: 150px;">{{item.name}}</label>
            <img [src]="item.image" style="width: 30px; border: 1px solid #efefef;margin-right: 20px;" />
            <label>Capital - {{item.capital}}</label>
          </ng-template>
  </c-item>    
</techhive-multiselect>

Template - For custom html of Selected item - badge

<techhive-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
  <c-badge>
           <ng-template let-item="item">
            <label style="margin: 0px;">{{item.name}}</label>
            <img [src]="item.image" style="width: 16px; margin-right: 5px;" />
           </ng-template>
  </c-badge>  
</techhive-multiselect>

Template Driven Forms support

<form (ngSubmit)="onSubmit()" #loginForm="ngForm" style="border: 1px solid #ccc; padding: 10px;">
        <div class="form-group">
            <label for="name">Skills</label>
            <techhive-multiselect [data]="itemList" [(ngModel)]="formModel.skills" 
                                  [settings]="settings" 
                                  (onSelect)="onItemSelect($event)"
                                  (onDeSelect)="OnItemDeSelect($event)" 
                                  (onSelectAll)="onSelectAll($event)" 
                                  (onDeSelectAll)="onDeSelectAll($event)" name="skills">
            </techhive-multiselect>
        </div>
</form>

formModel = {
        name: '',
        email: '[email protected]',
        skills: [{ "id": 1, "name": "Angular" }]
    };

Reactive Forms support

<form [formGroup]="userForm" novalidate style="border: 1px solid #ccc; padding: 10px;">
        <div class="form-group">
            <label for="name">Skills</label>
           <techhive-multiselect [data]="itemList" [(ngModel)]="selectedItems" 
                                  [settings]="settings" 
                                  (onSelect)="onItemSelect($event)"
                                  (onDeSelect)="OnItemDeSelect($event)" 
                                  (onSelectAll)="onSelectAll($event)" 
                                  (onDeSelectAll)="onDeSelectAll($event)" formControlName="skills">
            </techhive-multiselect>
        </div>
</form>

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

Settings

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 |

Callback Methods

• 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/