Angular 2 multiselect dropdown component for web applications. Easy to integrate and use.
From v3.0.0 onwards, you need to include default.theme.css file to get the basic styling of the dropdown. Refer to themes and theming section below
-
The Mutiselect Dropdown package is published on the npm Registry.
-
Install the package :
npm install angular2-multiselect-dropdown -
Once installed import
AngularMultiSelectModulefrom the installed package into your module as follows:
Latest version available for each version of Angular
| angular2-multiselect-dropdown | Angular |
|---|---|
| 10.0.0 | 18.X.X |
| 9.0.0 | 17.X.X |
| 8.0.0 | 16.X.X |
| 7.0.0 | 15.X.X |
| 6.0.0 | 14.X.X |
Import AngularMultiSelectModule into NgModule in app.module.ts. Angular's FormsModule is also required.
import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown';
import { FormsModule } from '@angular/forms';
@NgModule({
// ...
imports: [
AngularMultiSelectModule,
FormsModule
]
// ...
})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,
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);
}
}Add the following component tag in you template
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)"></angular2-multiselect>- From v3.0.0 onwards, you need to include
default.theme.cssfile to get the basic styling of the dropdown. - The component package has a themes folder in node_modules at
angular2-multiselect-dropdown\themes\default.theme.css - Include the
default.theme.cssinangular-cli.json(for versions below angular 6) andangular.json(for version 6 or more). - Refer this file on how to add the css file to your angular project.
You can create your own theme from now on. You can have a look at example scss theming file at Default theme
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
<c-item>
<ng-template let-item="item">
<label style="color: #333;min-width: 150px;">{{item.itemName}}</label>
<img [src]="item.image" style="width: 30px; border: 1px solid #efefef;margin-right: 20px;" />
<label>Capital - {{item.capital}}</label>
</ng-template>
</c-item>
</angular2-multiselect><angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
<c-badge>
<ng-template let-item="item">
<label style="margin: 0px;">{{item.itemName}}</label>
<img [src]="item.image" style="width: 16px; margin-right: 5px;" />
</ng-template>
</c-badge>
</angular2-multiselect><form (ngSubmit)="onSubmit()" #loginForm="ngForm" style="border: 1px solid #ccc; padding: 10px;">
<div class="form-group">
<label for="name">Skills</label>
<angular2-multiselect [data]="itemList" [(ngModel)]="formModel.skills"
[settings]="settings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)" name="skills">
</angular2-multiselect>
</div>
</form>formModel = {
name: '',
email: 'ascasc@aa.com',
skills: [{ "id": 1, "itemName": "Angular" }]
};<form [formGroup]="userForm" novalidate style="border: 1px solid #ccc; padding: 10px;">
<div class="form-group">
<label for="name">Skills</label>
<angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems"
[settings]="settings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)" formControlName="skills">
</angular2-multiselect>
</div>
</form>userForm: FormGroup;
this.userForm = this.fb.group({
name: '',
email: ['', Validators.required],
skills: [[], Validators.required]
});The following list of settings are supported by the component. Configure the settings to meet your requirement.
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)"onGroupSelect- Returns the selected group items as an array. Example: (onGroupSelect)="onGroupSelect($event)"onGroupDeSelect- Returns the sun-elected group items as an array. Example: (onGroupDeSelect)="onGroupDeSelect($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)"onScrollToEnd- Callback event fired when the dropdown list is scrolled to the end. Usually used with virtual scrolling, to load data on scroll. Example : (onScrollToEnd)="fetchMore($event)"onAddFilterNewItem- Callback event fired when you click theAddbutton which will appear whenaddNewItemOnFiltersetting is enabled. Example : (onAddFilterNewItem)="onAddItem($event)"onFilterSelectAll- Callback event fired when the list is filtered and all filtered items are selected with select all filtered items checkbox. Example : (onFilterSelectAll)="onFilterSelectAll($event)"onFilterDeSelectAll- Callback event fired when the list is filtered and all filtered items are de-selected with de-select all filtered items checkbox. Example : (onFilterDeSelectAll)="onFilterDeSelectAll($event)"
- Clone the repository or downlod the .zip,.tar files.
- Run
npm install - Run
ng servefor a dev server - Navigate to
http://localhost:4200/The app will automatically reload if you change any of the source files.
MIT License.