Simple multiselect dropdown based on bootstrap 4 dropdown component.
npm install ngx-bootstrap-multiselect-dropdown
npm install ngx-bootstrap-multiselect-dropdown
Add "node_modules/bootstrap/dist/css/bootstrap.min.css" to angular.json styles.
import { NgxBootstrapMultiselectDropdownModule } from 'ngx-bootstrap-multiselect-dropdown/ngx-bootstrap-multiselect-dropdown';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxBootstrapMultiselectDropdownModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
this.dropdownList = [
{"idValue":1,"nameValue":"India"},
{"idValue":2,"nameValue":"Singapore"},
{"idValue":3,"nameValue":"Australia"},
{"idValue":4,"nameValue":"Canada"},
{"idValue":5,"nameValue":"South Korea"},
{"idValue":6,"nameValue":"Germany"},
{"idValue":7,"nameValue":"France"},
{"idValue":8,"nameValue":"Russia"},
{"idValue":9,"nameValue":"Italy"},
{"idValue":10,"nameValue":null}
];
this.selectedItems = [];
this.dropdownSettings = {
dataIdProperty: "idValue",
dataNameProperty: "nameValue",
headerText: "Test header",
noneSelectedBtnText: "All selected",
btnWidth: "200px",
dropdownHeight: "200px",
showDeselectAllBtn: true,
showSelectAllBtn: true,
deselectAllBtnText: 'Deselect',
selectAllBtnText: 'Select',
btnClasses: 'btn btn-primary btn-sm dropdown-toggle',
selectionLimit: 3,
enableFilter: true
};
<ngx-bootstrap-multiselect
name="selectedItems"
[(ngModel)]="selectedItems"
[items]="dropdownList"
[settings]="dropdownSettings">
</ngx-bootstrap-multiselect>
| Property | Type | Default value | Description |
|---|---|---|---|
| dropdownHeight | string | 'auto' | Sets the height of the dropdown. |
| btnWidth | string | 'auto' | Width of the dropdown toggle button. |
| noneSelectedBtnText | string | 'None selected' | Button text when no dropdown items are selected |
| dataIdProperty | string | 'id' | Name of 'ID' property belonging to dropdown items. |
| dataNameProperty | string | 'name' | Name of 'Name' property belonging to dropdown items. |
| deselectAllBtnText | string | 'Deselect all' | Text of deselect all button. |
| selectAllBtnText | string | 'Select all' | Text of select all button. |
| enableFilter | boolean | false | Show dropdown item filter text input. |
| dropdownClasses | string | - | Additional CSS classes added to dropdown menu. |
| headerText | string | - | Text displayed at top of dropdown menu. |
| selectionLimit | number | - | Limit number of how many dropdown items can be selected. |
| showDeselectAllBtn | boolean | - | Show deselect all button on dropdown menu. |
| showSelectAllBtn | boolean | - | Show select all button on dropdown menu. |
| btnClasses | string | - | Additional CSS classes added to dropdown menu toggle button. |