NgxBootstrapMultiselectDropdown
Install
npm install ngx-bootstrap-multiselect-dropdown
Example
Add "node_modules/bootstrap/dist/css/bootstrap.min.css" to angular.json styles.
Register module
import { NgxBootstrapMultiselectDropdownModule } from 'ngx-bootstrap-multiselect-dropdown/ngx-bootstrap-multiselect-dropdown';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxBootstrapMultiselectDropdownModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Setup
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>
Settings
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. |