Works with Angular Final and AOT compilation
Customizable dropdown multiselect in Angular 2, TypeScript with bootstrap css.
See demo: http:https://softsimon.github.io/angular-2-dropdown-multiselect
- Bootstrap CSS 3 or 4
- Font Awesome (optional)
- 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-dev.
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[];
ngOnInit() {
myOptions: IMultiSelectOption[] = [
{ 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>Import the IMultiSelectOption and IMultiSelectTexts interfaces to enable/override settings and text strings:
optionsModel: number[] = [1, 2]; // Default selection
mySettings: IMultiSelectSettings = {
pullRight: false,
enableSearch: false,
checkedStyle: 'checkboxes',
buttonClasses: 'btn btn-default',
selectionLimit: 0,
closeOnSelect: false,
showCheckAll: false,
showUncheckAll: false,
dynamicTitleMaxItems: 3,
maxHeight: '300px',
};
myTexts: IMultiSelectTexts = {
checkAll: 'Check all',
uncheckAll: 'Uncheck all',
checked: 'checked',
checkedPlural: 'checked',
searchPlaceholder: 'Search...',
defaultTitle: 'Select',
};
/* Labels */
myOptions: IMultiSelectOption[] = [
{ id: 1, name: 'Car brands', isLabel: true },
{ id: 2, name: 'Volvo', parentId: 1 },
{ id: 3, name: 'Colors', isLabel: true },
{ id: 4, name: 'Blue', parentId: 3 }
];<ss-multiselect-dropdown [options]="myOptions" [texts]="myTexts" [settings]="mySettings" [(ngModel)]="optionsModel"></ss-multiselect-dropdown>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>Pull requests are welcome!
[MIT]