Angular MultiSelect Dropdown

In these article we discuss on How to easily implement multi-select in our angular application.
Installation
For installation we need to run following command.

    npm install angular2-multiselect-dropdown 

After run above command we need to “AngularMultiSelectModule” in our app.module.ts.


..................
import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';
........
@NgModule({
  // ...
  imports: [
    AngularMultiSelectModule,
  ]
  // ...
})



Basic Usage


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

@Component({
  selector: 'basic-multiselect',
  templateUrl: './multiselect.html'
})
export class BasicComponent implements OnInit {
    countryList = [];
    selectedItems = [];
    options= {};
    ngOnInit(){
        this.countryList = [
                              {"id":1,"itemName":"US"},
                              {"id":2,"itemName":"UK"},
                              {"id":3,"itemName":"India"},
                              {"id":4,"itemName":"Australia"},
                              {"id":5,"itemName":"Canada"}
                            ];
        this.selectedItems = [
                               {"id":2,"itemName":"UK"},
                               {"id":4,"itemName":"Australia"}
                            ];
        this.options = { 
                                  singleSelection: false, 
                                  text:"Select Countries",
                                  selectAllText:'Select All',
                                  unSelectAllText:'UnSelect All',
                                  enableSearchFilter: true,
                                  classes:"myclass custom-class"
                                };            
    }
    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);
    }
}



<angular2-multiselect [data]="countryList" [(ngModel)]="selectedItems" 
    [settings]="options" 
    (onSelect)="onItemSelect($event)" 
    (onDeSelect)="OnItemDeSelect($event)"
    (onSelectAll)="onSelectAll($event)"
    (onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>


Embedded code for Basic Multi select example.

Configuration Options For MultiSelect

Option Name DataType Description
singleSelection Boolean For single item selection only
Default: false
enableCheckAll Boolean This enable select all items in list
Default: false
enableSearchFilter Boolean This enable search filter in List
Default: false
text String When no item selected at that time these text display.
Default: “Select”
selectAllText String Default: “Select All”
unSelectAllText String Default: “UnSelect All”
maxHeight Number Height of the drop-down box in PX
limitSelection Number Number of item max select by User after reach that limit all other option disable.
searchPlaceholderText String Custom Search text box name



Callback Methods For MultiSelect

Method Name Description
onSelect It return the selected item on selection
onSelectAll It return the list of all selected items
onDeSelect It return the un-selected item on un-selecting
onDeSelectAll It return empty array
onOpen It trigger when drop-down open.
onClose It trigger when drop-down is close.

Spread the love
  • 42
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •