Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
angular-2-dropdown-multiselect
Advanced tools
Customizable dropdown multiselect in Angular 2 with bootstrap css.
Works with Angular Final and AOT compilation
Customizable dropdown multiselect in Angular 2, TypeScript with bootstrap css.
See demo: http://softsimon.github.io/angular-2-dropdown-multiselect
git clone https://github.com/softsimon/angular-2-dropdown-multiselect.git
.bower install angular-2-dropdown-multiselect --save
.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]
FAQs
Customizable dropdown multiselect in Angular 2 with bootstrap css.
The npm package angular-2-dropdown-multiselect receives a total of 2,325 weekly downloads. As such, angular-2-dropdown-multiselect popularity was classified as popular.
We found that angular-2-dropdown-multiselect demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.