Angular 2/4/6/8 Multiselect Dropdown
Angular 2 multiselect dropdown component for web applications. Easy to integrate and use.
NOTE: This is a fork of angular2-multiselect-dropdown.
- Angular 2/4/6/8 Multiselect Dropdown
- Important Notice !!
- From v3.0.0 onwards, you need to include
default.theme.css
file to get the basic styling of the dropdown. Refer tothemes and theming
section below - [Documentation | Demos / Examples.](#documentation--demos--examples)
Important Notice !!
default.theme.css
file to get the basic styling of the dropdown. Refer to themes and theming
section below
From v3.0.0 onwards, you need to include Documentation | Demos / Examples.
Getting Started
Installation
-
The Mutiselect Dropdown package is published on the npm Registry.
-
Install the package :
npm install ngx-multiselect-dropdown
-
Once installed import
AngularMultiSelectModule
from the installed package into your module as follows:
Usage
Import AngularMultiSelectModule
into NgModule
in app.module.ts
. Angular's FormsModule
is also required.
;; @
Declare the component data variables and options in your component where you want to consume the dropdown component.
; implements OnInit dropdownList = ; selectedItems = ; dropdownSettings = {}; { thisdropdownList = "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" ; thisselectedItems = "id":2"itemName":"Singapore" "id":3"itemName":"Australia" "id":4"itemName":"Canada" "id":5"itemName":"South Korea" ; thisdropdownSettings = singleSelection: false text:"Select Countries" selectAllText:'Select All' unSelectAllText:'UnSelect All' enableSearchFilter: true classes:"myclass custom-class" ; } { console; console; } { console; console; } { console; } { console; }
Add the following component tag in you template
Themes and Theming
- From v3.0.0 onwards, you need to include
default.theme.css
file to get the basic styling of the dropdown. - The component package has a themes folder in node_modules at
ngx-multiselect-dropdown\themes\default.theme.css
- Include the
default.theme.css
inangular-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
Template - For custom html of menu item
{{item.itemName}} Capital - {{item.capital}}
Template - For custom html of Selected item - badge
{{item.itemName}}
Template Driven Forms support
Skills
formModel = name: '' email: 'ascasc@aa.com' skills: "id": 1 "itemName": "Angular" ;
Reactive Forms support
Skills
userForm: FormGroup;thisuserForm = thisfb;
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 |
enableFilterSelectAll | Boolean | A 'select all' checkbox to select all filtered results. | true |
filterSelectAllText | String | Text to display as the label of select all option | Select all filtered results |
filterUnSelectAllText | String | Text to display as the label of unSelect option | UnSelect all filtered results |
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 |
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 |
selectGroup | Boolean | Select a group at once. GroupBy should be enabled, to use this. | false |
searchAutofocus | Boolean | Autofocus search input field | true |
labelKey | String | The property name which should be rendered as label in the dropdown | itemName |
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 |
noDataLabel | String | Label text when no data is available in the list | 'No Data Available' |
searchBy | Array | Search the list by certain properties of the list item. Ex: ["itemName, "id","name"]. Deafult is , it will search the list by all the properties of list item | [] |
lazyLoading | Boolean | Enable lazy loading. Used to render large datasets. | false |
showCheckbox | Boolean | Show or hide checkboxes in the list | true |
addNewItemOnFilter | Boolean | Whe you filter items and if, the item is not found, you can add the text as new item to the list | false |
addNewButtonText | String | The text in the button when addNewItemOnFilter is enabled |
'Add' |
escapeToClose | boolean | Press excape key to close the dropdown | true |
Events
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 theAdd
button which will appear whenaddNewItemOnFilter
setting 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)"
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/
The app will automatically reload if you change any of the source files.
License
MIT License.