Overview

A multiselect dropdown component for angular applications. Developed in Angular 2, its easy to install and integrate.

  1. Dropdown with multiselect.
  2. Filter list.
  3. Checkboxes.
  4. Check all feature.
  5. Single selection mode.
  6. Highly configurable.

Getting Started

To get started with using the multiselect dropdown component, follow the below steps. It’s easy to integrate and just a matter of minutes.

Installation

  • The Mutiselect Dropdown package is published on the npm Registry.
  • Install the package : npm install angular2-multiselect-dropdown

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

Usage

Import AngularMultiSelectModule into NgModule in app.module.ts

import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';

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

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,"itemName":"India"},
                              {"id":2,"itemName":"Singapore"},
                              {"id":3,"itemName":"Australia"},
                              {"id":4,"itemName":"Canada"},
                              {"id":5,"itemName":"South Korea"},
                              {"id":6,"itemName":"Germany"},
                              {"id":7,"itemName":"France"},
                              {"id":8,"itemName":"Russia"},
                              {"id":9,"itemName":"Italy"},
                              {"id":10,"itemName":"Sweden"}
                            ];
        this.selectedItems = [
                                {"id":2,"itemName":"Singapore"},
                                {"id":3,"itemName":"Australia"},
                                {"id":4,"itemName":"Canada"},
                                {"id":5,"itemName":"South Korea"}
                            ];
        this.dropdownSettings = { 
                                  singleSelection: false, 
                                  text:"Select Countries",
                                  selectAllText:'Select All',
                                  unSelectAllText:'UnSelect All',
                                  enableSearchFilter: true
                                };            
    }
    onItemSelect(item){
        console.log('Selected Item:');
        console.log(item);
    }
    OnItemDeSelect(item){
        console.log('De-Selected Item:');
        console.log(item);
    }
}

Add the following component tag in you template

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

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. '' or null
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 dropdown false
searchPlaceholderText String Custom text for the search placeholder text. Default value would be 'Search' 'Search'

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)"

Thats all Folks !! You are good to go.

Please raise any issues here

To run the code and build in your local, follw the below steps

  • git clone https://github.com/CuppaLabs/angular2-multiselect-dropdown.git
  • npm install
  • ng serve
  • Go to http://localhost:4200 where your app will run.

Licence

This project is licensed under the MIT license. The MIT License (MIT) Copyright (c) 2016 Cuppa Labs

Pradeep Terli

Web UI Developer, Blogger, Thinker , Entrepreneur. Loves to explore technology with focus on web technologies.