AngularX Dropdown Multiselect for Bootstrap CSS

Works with Angular Final and AOT compilation

Customizable dropdown multiselect in AngularX, TypeScript with bootstrap css.

See demo: http://softsimon.github.io/angular-2-dropdown-multiselect

Dependencies

• Bootstrap CSS 3 or 4
• Font Awesome (optional)

Quick start options

• Download the latest release.
• Clone the repo: git clone https://github.com/softsimon/angular-2-dropdown-multiselect.git.
• Install with Bower: bower install angular-2-dropdown-multiselect --save.
• Install with npm: npm install angular-2-dropdown-multiselect --save.

Usage

Import MultiselectDropdown into your @NgModule.

import { MultiselectDropdownModule } from 'angular-2-dropdown-multiselect';

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

Define options in your consuming component:

import { IMultiSelectOption } from 'angular-2-dropdown-multiselect';

export class MyClass implements OnInit {
    optionsModel: number[];
    myOptions: IMultiSelectOption[];

    ngOnInit() {
        this.myOptions = [
            { id: 1, name: 'Option 1' },
            { id: 2, name: 'Option 2' },
        ];
    }
    onChange() {
        console.log(this.optionsModel);
    }
}

In your template, use the component directive:

<ss-multiselect-dropdown [options]="myOptions" [(ngModel)]="optionsModel" (ngModelChange)="onChange($event)"></ss-multiselect-dropdown>

Customize

Import the IMultiSelectOption and IMultiSelectTexts interfaces to enable/override settings and text strings:

// Default selection
optionsModel: number[] = [1, 2];

// Settings configuration
mySettings: IMultiSelectSettings = {
    enableSearch: true,
    checkedStyle: 'fontawesome',
    buttonClasses: 'btn btn-default btn-block',
    dynamicTitleMaxItems: 3,
    displayAllSelectedText: true
};

// Text configuration
myTexts: IMultiSelectTexts = {
    checkAll: 'Select all',
    uncheckAll: 'Unselect all',
    checked: 'item selected',
    checkedPlural: 'items selected',
    searchPlaceholder: 'Find',
    defaultTitle: 'Select',
    allSelected: 'All selected',
};

// Labels / Parents
myOptions: IMultiSelectOption[] = [
    { id: 1, name: 'Car brands', isLabel: true },
    { id: 2, name: 'Volvo', parentId: 1 },
    { id: 3, name: 'Honda', parentId: 1 },
    { id: 4, name: 'BMW', parentId: 1 },
    { id: 5, name: 'Colors', isLabel: true },
    { id: 6, name: 'Blue', parentId: 5 },
    { id: 7, name: 'Red', parentId: 5 },
    { id: 8, name: 'White', parentId: 5 }
];

<ss-multiselect-dropdown [options]="myOptions" [texts]="myTexts" [settings]="mySettings" [(ngModel)]="optionsModel"></ss-multiselect-dropdown>

Settings

| Setting | Description | Default Value | | -------------------- | ------------------------------------------------------------------ | ---------------- | | pullRight | Float the dropdown to the right | false | | enableSearch | Enable searching the dropdown items | false | | checkedStyle | Style of checked items one of 'checkboxes', 'glyphicon' or 'fontawesome' | 'checkboxes' | | buttonClasses | CSS classes to apply to the trigger button | 'btn btn-default' | | itemClasses | CSS classes to apply to items | '' | | containerClasses | CSS classes to apply to container div | 'dropdown-inline' | | selectionLimit | Maximum number of items that may be selected (0 = no limit) | 0 | | autoUnselect | Unselect the previous selection(s) once selectionLimit is reached | false | | closeOnSelect | If enabled, dropdown will be closed after selection | false | | showCheckAll | Display the checkAll item to select all options | false | | showUncheckAll | Display the uncheckAll item to unselect all options | false | | fixedTitle | Use the default title (do not apply the dynamic title) | false | | dynamicTitleMaxItems | The maximum number of options to display in the dynamic title | 3 | | maxHeight | The maximum height for the dropdown (including unit) | '300px' | | displayAllSelectedText | Display the allSelected text when all options are selected | false | | searchRenderLimit | If enableSearch=true and total amount of items more then searchRenderLimit (0 - No limit) then render items only when user typed more then or equal searchRenderAfter charachters | 0 | | searchRenderAfter | Amount of characters to trigger rendering of items | 1 | | searchMaxLimit | If more than zero will render only first N options in search results | 0 | | searchMaxRenderedItems | Used with searchMaxLimit to further limit rendering for optimization. Should be less than searchMaxLimit to take effect | 0 | | displayAllSelectedText | Display the allSelected text when all options are selected | false | | closeOnClickOutside | Close dropdown when clicked outside | true |

Texts

| Text Item | Description | Default Value | | --------------------- | ------------------------------------------ | ---------------- | | checkAll | The text for the "check all" option | 'Check all' | | uncheckAll | The text for the "uncheck all" option | 'Uncheck all' | | checked | Text for "checked" with single item selected (used in dynamic title) | 'checked' | | checkedPlural | Text for "checked" with multiple items selected (used in dynamic title) | 'checked' | | searchPlaceholder | Text initially displayed in search input | 'Search...' | | defaultTitle | Title displayed in button before selection | 'Select' | | allSelected | Text displayed when all items are selected (must be enabled in options) | 'All selected' | | saerchEmptyResult | Text displayed when no items are rendered | 'Nothing found...' | | searchNoRenderText | Text displayed when items rendering disabled by the searchRenderLimit option | 'Type in search box to see results...' |

Other examples

Single select

Although this dropdown is designed for multiple selections, a common request is to only allow a single selection without requiring the user to unselect their previous selection each time. This can be accomplished by setting selectionLimit to 1 and autoUnselect to true.

{
  ...
  selectionLimit: 1,
  autoUnselect: true,
  ...
}

Use model driven forms with ReactiveFormsModule:

import { IMultiSelectOption } from 'angular-2-dropdown-multiselect';

export class MyClass implements OnInit {
    model: number[];
    myOptions: IMultiSelectOption[] = [
        { id: 1, name: 'Option 1' },
        { id: 2, name: 'Option 2' },
    ];

    ngOnInit() {
        this.myForm = this.formBuilder.group({
            optionsModel: [1, 2], // Default model
        });

        this.myForm.controls['optionsModel'].valueChanges
            .subscribe((selectedOptions) => {
                // changes
            });
    }
}

<form [formGroup]="myForm">
    <ss-multiselect-dropdown [options]="myOptions" formControlName="optionsModel"></ss-multiselect-dropdown>
</form>

Developing

Pull requests are welcome!

License

[MIT]