angular2-multiselect-dropdown

To use the multiselect dropdown in your Angular project, you must import AngularMultiSelectModule into your NgModule. Additionally, FormsModule from @angular/forms is a required dependency for the component to function correctly.

Ensure you select the version of angular2-multiselect-dropdown that matches your Angular version:

• Angular 18.X.X: use angular2-multiselect-dropdown v10.0.0
• Angular 17.X.X: use angular2-multiselect-dropdown v9.0.0
• Angular 16.X.X: use angular2-multiselect-dropdown v8.0.0
• Angular 15.X.X: use angular2-multiselect-dropdown v7.0.0
• Angular 14.X.X: use angular2-multiselect-dropdown v6.0.0

import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown';
import { FormsModule } from '@angular/forms';

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

Install the multiselect dropdown package using the npm registry.

npm install angular2-multiselect-dropdown

From version 3.0.0 onwards, basic styling requires the default.theme.css file.

1. Locate the file in node_modules/angular2-multiselect-dropdown/themes/default.theme.css.
2. Include it in your project configuration:
   • For Angular 6+: Add it to the styles array in angular.json.
   • For Angular < 6: Add it to angular-cli.json.

After installing the package, you must import AngularMultiSelectModule into your Angular application module (e.g., app.module.ts) to make the component available.

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

@NgModule({
  imports: [
    AngularMultiSelectModule.forRoot(),
    // ... other imports
  ],
  // ...
})
export class AppModule { }

The [settings] input accepts an object to customize the behavior and appearance of the dropdown. Common settings include:

• singleSelection: Boolean to restrict selection to one item.
• text: Placeholder text when no items are selected.
• enableSearchFilter: Boolean to enable the search input.
• selectAllText / unSelectAllText: Custom labels for select/unselect all actions.
• labelKey: The property name used for the display label (defaults to itemName).
• primaryKey: The property used for identification (defaults to id).
• maxHeight: Maximum height of the dropdown list in pixels.
• classes: Custom CSS classes applied to the component selector.

this.dropdownSettings = {
  singleSelection: false, 
  text: "Select Countries",
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  enableSearchFilter: true,
  classes: "myclass custom-class"
};

The VirtualScrollerDefaultOptions interface allows you to tune the performance and appearance of the virtual scroller within the multiselect dropdown. This is useful for adjusting how scroll events are handled (throttling/debouncing), animation speeds, and scrollbar dimensions.

export interface VirtualScrollerDefaultOptions {
	scrollThrottlingTime: number;
	scrollDebounceTime: number;
	scrollAnimationTime: number;
	scrollbarWidth?: number;
	scrollbarHeight?: number;
	checkResizeInterval: number;
	resizeBypassRefreshThreshold: number;
	modifyOverflowStyleOfParentScroll: boolean;
	stripedTable: boolean;
}

The following events are emitted by the <angular2-multiselect> component:

• onSelect: Returns the selected item.
• onDeSelect: Returns the un-selected item.
• onSelectAll: Returns the list of all selected items.
• onDeSelectAll: Returns an empty array.
• onGroupSelect: Returns the selected group items as an array.
• onGroupDeSelect: Returns the un-selected group items as an array.
• onOpen: Fired after the dropdown opens.
• onClose: Fired when the dropdown is closed.
• onScrollToEnd: Fired when the list is scrolled to the end (useful for lazy loading).
• onAddFilterNewItem: Fired when clicking the 'Add' button during filtering.
• onFilterSelectAll: Fired when all filtered items are selected.
• onFilterDeSelectAll: Fired when all filtered items are de-selected.