Angular Bootstrap multiselect
Angular Multiselect - Bootstrap 4 & Material Design
Angular Bootstrap Multiselect is a component that allows users to tick multiple options from a collapsible list of values. Can be used in forms, menus and surveys.
Its implementation is quite simple, and in exchange brings a lot of UX value.
Examples of Bootstrap Multiselect use:
- Ingredience choice within pizza delivery system
- Laptop hardware configuration in online shop
- Flight booking customization
Default multiselect
<select class="custom-select" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Material design MDB Pro component
<div class="row">
<div class="col-md-6">
<mdb-select [options]="optionsSelect" [multiple]="true" [highlightFirst]="false" placeholder="Choose your option"></mdb-select>
<label>Example label</label>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'multiple-material-select-example',
templateUrl: 'multiple-material-select.html',
})
export class MultipleMaterialSelectComponent implements OnInit {
optionsSelect: Array<any>;
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
}
}
Multiselect with options groupsMDB Pro component
<div class="row">
<div class="col-md-6">
<mdb-select [options]="groupOptionsSelect" [multiple]="true" [highlightFirst]="false" placeholder="Choose your option"></mdb-select>
<label>Example label</label>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'multiple-options-material-select-example',
templateUrl: 'multiple-options-material-select.html',
})
export class MultipleOptionsMaterialSelectComponent implements OnInit {
groupOptionsSelect: Array<any>;
ngOnInit() {
this.groupOptionsSelect = [
{ value: '', label: 'team 1', group: true },
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '', label: 'team 2', group: true },
{ value: '3', label: 'Option 3' },
{ value: '4', label: 'Option 4' },
];
}
}
Disabled multiselect MDB Pro component
You can make your select unselectable, by adding
[disabled]="disabled"
to
mdb-select
.
<div class="row">
<div class="col-md-6">
<mdb-select [options]="optionsSelect" [disabled]="disabled" [multiple]="true" [highlightFirst]="false" placeholder="Choose your option" label="Example label"></mdb-select>
</div>
<div class="col-md-6">
<mdb-select [options]="disOptionsSelect" [multiple]="true" [highlightFirst]="false" placeholder="Choose your option" label="Example label"></mdb-select>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'disabled-material-select-example',
templateUrl: 'disabled-material-select.html',
})
export class DisabledMaterialSelectComponent implements OnInit {
optionsSelect: Array<any>;
disabled: boolean = true;
disOptionsSelect: Array<any>;
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'Option 1' } ,
{ value: '2', label: 'Option 2' } ,
{ value: '3', label: 'Option 3' } ,
];
this.disOptionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' } ,
{ value: '3', label: 'Disabled option', disabled: true } ,
];
}
}
Update options dynamically MDB Pro component
To update multiselect options dynamically mdb-select
component uses the Angular change
detection mechanism. Since Angular only checks if array reference has changed, component will not detect a change
when you add new option with push method:
this.selectOptions.push({ value: '4', label: 'Option 4' })
Insted you need to do:
this.selectOptions = [...this.selectOptions, { value: '4', label: 'Option 4'}]
<div class="row">
<div class="col-md-6">
<mdb-select [options]="optionsSelect" [multiple]="true" [highlightFirst]="false" placeholder="Choose your option" label="Example label"></mdb-select>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'update-options-select',
templateUrl: './update-options-select.html'
})
export class AppComponent implements OnInit {
optionsSelect: Array<any>;
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
setTimeout(() => {
this.optionsSelect = [...this.optionsSelect, { value: '4', label: 'Option 4' }];
}, 3000);
}
}
Template-driven forms MDB Pro component
In this section you will find informations on how to use our multiselect component in template-driven forms.
Remember to import
FormsModule
in your's
app.module.ts
Preselected values
Bind in two-way ngModel from component.html with selectedValues in component.ts file
<mdb-select [(ngModel)]="selectedValues" [multiple]="true" [highlightFirst]="false" [options]="dateOptionsSelect" placeholder="Choose time period"></mdb-select>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'defaultvalue-multiselect',
templateUrl: 'defaultvalue-multiselect.html',
})
export class DefaultValueMultiselectComponent implements OnInit {
dateOptionsSelect= [
{ value: '1', label: 'Today', selected: true },
{ value: '2', label: 'Yesterday' },
{ value: '3', label: 'Last 7 days' },
{ value: '4', label: 'Last 30 days' },
{ value: '5', label: 'Last week' },
{ value: '6', label: 'Last month' }
];
selectedValues = ['1', '2'];
Get selected values
Get array of selected values with ngModelChange event, which fires every time you select an option.
<mdb-select (ngModelChange)="getSelectedValues($event)" [(ngModel)]="selectedValues" [multiple]="true" [highlightFirst]="false" [options]="dateOptionsSelect"
placeholder="Choose time period"></mdb-select>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'getvalue-multiselect',
templateUrl: 'getvalue-multiselect.html',
})
export class GetValueMultiselectComponent implements OnInit {
dateOptionsSelect= [
{ value: '1', label: 'Today', selected: true },
{ value: '2', label: 'Yesterday' },
{ value: '3', label: 'Last 7 days' },
{ value: '4', label: 'Last 30 days' },
{ value: '5', label: 'Last week' },
{ value: '6', label: 'Last month' }
];
selectedValues = ['1', '2'];
getSelectedValues(event: any) {
console.log('Selected value', event);
}
Reactive forms MDB Pro component
In this section you will find informations on how to use our multiselect component in reactive forms.
Remember to import
ReactiveFormsModule
in your's
app.module.ts
Preselected values
Set default values in FormControl
<form [formGroup]="testForm">
<div class="row">
<div class="col-md-6">
<mdb-select [options]="optionsSelect" [multiple]="true" [highlightFirst]="false" formControlName="testSelect" placeholder="Choose your option"></mdb-select>
<label>Example label</label>
</div>
</div>
</form>
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'defaultvalue-multiselect',
templateUrl: 'defaultvalue-multiselect.html',
})
export class DefaultValueMultiselectComponent implements OnInit {
testForm: FormGroup;
optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
ngOnInit() {
this.testForm = new FormGroup({
testSelect: new FormControl(['1', '2'])
});
}
Get selected values
Get selected values with reactive forms valueChanged
method.
<form [formGroup]="testForm">
<div class="row">
<div class="col-md-6">
<mdb-select [options]="optionsSelect" [multiple]="true" [highlightFirst]="false" formControlName="testSelect" placeholder="Choose your option"></mdb-select>
<label>Example label</label>
</div>
</div>
</form>
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'getvalue-multiselect',
templateUrl: 'getvalue-multiselect.html',
})
export class GetValueMultiselectComponent implements OnInit {
testForm: FormGroup;
optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
ngOnInit() {
this.testForm = new FormGroup({
testSelect: new FormControl('')
});
this.testForm.get('testSelect').valueChanges.subscribe( (value) => {
console.log('Selected values:', value);
});
}
Outline version MDB Pro component
Use the [outline]
input to make the Material Select outline like in Material 2.0.
<mdb-select [outline]="true" [multiple]="true" [options]="optionsSelect" label="Choose your option"></mdb-select>
import { Component } from '@angular/core';
@Component({
selector: 'outline-select',
templateUrl: 'outline-select.component.html',
})
export class OutlineSelectComponent {
optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
}
Angular Multiselect - API
In this section you will find informations about required modules and available inputs, outputs, methods and events of multiselect component.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Select:
// MDB Angular Pro
import { WavesModule, SelectModule } from 'ng-uikit-pro-standard'
// Angular Animations Module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
Components
MdbSelect
Selector: mdb-select
Type: SelectComponent
Inputs
Name | Type | Default | Description | Example |
---|---|---|---|---|
options |
Array<IOption> | - | Pass here an array of items from which you want to select | [options]="mySelectOptionsList" |
customClass |
string | ' ' | Pass here a css class which you want to add on the internal element of mdb-select | [customClass]=" 'blue' " |
allowClear |
boolean | false | Whether button for removing selected options should be visible | [allowClear]="true" |
disabled |
boolean | false | Allow to disable select input | [disabled]="true" |
filterEnabled |
boolean | false | Whether select search box should be visible | [filterEnabled]="true" |
filterAutocomplete |
boolean | false | Used to determine, if filter input should use browser autocomplete or not | [filterAutocomplete]="true" |
highlightColor |
string | - | Changes options background color on hover | [highlightColor]="'yellow'" |
highlightTextColor |
string | - | Changes options text color on hover | [highlightTextColor]="'yellow'" |
highlightFirst |
boolean | true | Wheter first option should be highlighted | [highlightFirst]="false" |
label |
string | - | Adds select label | [label]="'Example label'" |
multiple |
boolean | false | Enables selecting multiple options | [multiple]="true" |
notFoundMsg |
string | 'No results found' | Defines custom not found message for select search box | [notFoundMsg]="'Country not found'" |
placeholder |
string | ' ' | Defines placeholder for mdb-select element | placeholder="Text placeholder" |
filterPlaceholder |
string | ' ' | Defines the placeholder for the filter input element | filterPlaceholder="Filter placeholder" |
tabindex |
number | 0 | Changes tabindex of the component | [tabindex]="-1" |
visibleOptions |
number | 4 | Changes number of visible options in options list | [visibleOptions]="2" |
optionHeight |
number | 37 | Changes the single option height vavlue | optionHeight="50" |
enableSelectAll |
boolean | true | Determine if 'Select all' button should be visible or not. [multiple]="true" is necessary to use this input | enableSelectAll="false" |
selectAllLabel |
string | 'Select all' | Set the 'Select all' button text. [enableSelectAll] and [multiple] are necessary. | selectAllLabel="Select all elements" |
appendToBody |
boolean | false | Determine if select dropdown should be appended to body or not. Use this input when mdb-select parent has overflow: hidden | [outline]="true" |
outline |
boolean | false | Changes the appearance of the mdb-select to the outline. |
[outline]="true" |
Outputs
Name | Type | Description | Example |
---|---|---|---|
closed |
EventEmitter<any> | Event fired when the select is closed | (closed)="selectClosed($event)" |
deselected |
EventEmitter<IOption | IOption[]> | Event fired when the item is deselected (works only if [multiple]="true") | (deselected)="optionDeselected($event)" |
noOptionsFound |
EventEmitter<string> | Event fired when the select filter has no matching items (works only if [filterEnabled]="true" | (noOptionsFound)="noOptionsFound($event)" |
opened |
EventEmitter<any> | Event fired when the select is opened | (opened)="selectOpened($event)" |
selected |
EventEmitter<IOption> | Event fired when the options is selected | (selected)="optionSelected($event)" |
changed |
EventEmitter<any> | Event fired when the options is changed | (changed)="optionChanged($event)" |
Angular Multiselect - examples & customization
Colorful MultiselectMDB Pro component
<div class="row">
<div class="col-md-6 mx-auto my-5">
<mdb-select [options]="optionsSelect" [multiple]="true" [highlightFirst]="false" class="colorful-select dropdown-primary"
placeholder="Choose your option"></mdb-select>
<label>Example label</label>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'colorful-multiple-options-material-select-example',
templateUrl: 'colorful-multiple-options-material-select.html',
})
export class ColorfulMultipleOptionsMaterialSelectComponent implements OnInit {
optionsSelect: Array<any>;
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'USA' },
{ value: '2', label: 'Germany' },
{ value: '3', label: 'France' },
{ value: '4', label: 'Poland' }
];
}
}
Multiselect with iconsMDB Pro component
<div class="row">
<div class="col-md-6">
<mdb-select [options]="optionsSelect" [multiple]="true" placeholder="Choose your option"></mdb-select>
<label>Example label</label>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'multiple-icon-options-material-select-example',
templateUrl: 'multiple-icon-options-material-select.html',
})
export class MultipleIconOptionsMaterialSelectComponent implements OnInit {
optionsSelect: Array<any>;
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'Option 1', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg' },
{ value: '2', label: 'Option 2', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg' },
{ value: '3', label: 'Option 3', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg' },
];
}
}
Multiselect with filled-in checkboxMDB Pro component
<div class="row">
<div class="col-md-6 mx-auto my-5">
<mdb-select [options]="optionsSelect" [multiple]="true" customClass="filled-in" placeholder="Choose your option"></mdb-select>
<label>Example label</label>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'filled-in-multiple-options-material-select-example',
templateUrl: 'filled-in-multiple-options-material-select.html',
})
export class FilledInMultipleOptionsMaterialSelectComponent implements OnInit {
optionsSelect: Array<any>;
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
}
}
Multiselect with search box MDB Pro component
<div class="row">
<div class="col-md-6">
<mdb-select [multiple]="true" [filterEnabled]="true" [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
</div>
</div>
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'search-box-select',
templateUrl: './search-box-select.component.html',
styleUrls: ['./search-box-select.component.scss']
})
export class SearchBoxSelectComponent implements OnInit {
optionsSelect: Array<any>;
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
}
}
Customize toggle icon MDB Pro component
Use different font awesome icon:
<div class="row">
<div class="col-md-6">
<mdb-select [options]="optionsSelect" [multiple]="true" placeholder="Choose your option"></mdb-select>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'customize-toggle-select-example',
templateUrl: 'customize-toggle-select.html',
})
export class CustomizeToggleSelectComponent implements OnInit {
optionsSelect: Array<any>;
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
}
}
.mdb-select-toggle:before {
content: "\f0dd";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 1rem;
}
Use custom icon created with css styles:
<div class="row">
<div class="col-md-6">
<mdb-select [options]="optionsSelect" [multiple]="true" placeholder="Choose your option"></mdb-select>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'customize-toggle-select-example',
templateUrl: 'customize-toggle-select.html',
})
export class CustomizeToggleSelectComponent implements OnInit {
optionsSelect: Array<any>;
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
}
}
.mdb-select-toggle {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
width: 0;
height: 0;
transform: rotate(45deg);
margin-right: 10px;
margin-top: -10px;
}
.mdb-select-toggle:before {
content: '';
}