andy952 / ngx-bootstrap-multiselect-dropdown

NgxBootstrapMultiselectDropdown

Install

npm install ngx-bootstrap-multiselect-dropdown

Example

Add "node_modules/bootstrap/dist/css/bootstrap.min.css" to angular.json styles.

//Import and register module
import { NgxBootstrapMultiselectDropdownModule } from 'ngx-bootstrap-multiselect-dropdown';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        NgxBootstrapMultiselectDropdownModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }


//Example dropdown items
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}
];

//model
this.selectedItems = [];


//Example settings
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
};


//Html
<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.