Angular Bootstrap Multiselect

Angular Bootstrap Multiselect is a jQuery based plugin that allows users to tick multiple options from a standard Bootstrap select.

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

Standard multiselect MDB 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-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 groups MDB Pro component


<div class="row">
    <div class="col-md-6">
        <mdb-select [options]="groupOptionsSelect" [multiple]="true" 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' },
        ];
    }
}
    

Multiselect with icons MDB 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' },
        ];
    }
}
    

Colorful Multiselect MDB Pro component


<div class="row">
    <div class="col-md-6 mx-auto my-5">
        <mdb-select [options]="optionsSelect" [multiple]="true" 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: 'Option 1' },
            { value: '2', label: 'Option 2' },
            { value: '3', label: 'Option 3' },
        ];
    }
}
    

Multiselect with filled-in class MDB 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' },
        ];
    }
}
    

Default value in multiselect

Bind in two-way ngModel from component.html with selectedValue in component.ts file



<mdb-select [(ngModel)]="selectedValue" [options]="dateOptionsSelect" [multiple]="true" placeholder="Choose time period"></mdb-select>
	

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'defaultvalue-material-select-example',
  templateUrl: 'defaultvalue-material-select.html',
})

export class DefaultValueMaterialSelectComponent 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' }
    ];
    selectedValue = '1';
  

Remember to import FormsModule in your's app.module.ts


Array of selected values

Get array of selected values with ngModelChange event, which fires every time you select or deselect an option.



<mdb-select (ngModelChange)="getArrayOfValues($event)" [(ngModel)]="selectedValue" [options]="dateOptionsSelect" [multiple]="true" placeholder="Choose time period"></mdb-select>
	

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'getvalues-material-select-example',
  templateUrl: 'getvalues-material-select.html',
})

export class GetValuesMaterialSelectComponent 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' }
    ];
    selectedValue = '1';

    getArrayOfValues(event: any) {
        console.log('Array of selected values');
        console.log(event);
    }
  

Remember to import FormsModule in your's app.module.ts


Available events

Here you can find events which are fired by Material Multiselect


Name Usage Description
changed (changed)="selectChanged($event)" The event is fired when the select options changes.
opened (opened)="selectOpened($event)" The event is fired when the select is opened.
closed (closed)="selectClosed($event)" The event is fired when the select is closed.
selected (selected)="optionSelected($event)" The event is fired when the item is selected.
deselected (deselected)="optionDeselected($event)" The event is fired when the item is deselected - only if [multiple]="true".
noOptionsFound (noOptionsFound)="noOptionsFound($event)" The event is fired when the select has no matching items - only if [filterEnabled]="true".

<div class="row">
<div class="col-md-6 mx-auto my-5">
  <mdb-select [options]="optionsSelect" [multiple]="true" [filterEnabled]="true" (changed)="selectChanged($event)" (opened)="selectOpened($event)" (closed)="selectClosed($event)"
    (selected)="optionSelected($event)" (deselected)="optionDeselected($event)" (noOptionsFound)="noOptionsFound($event)"
    placeholder="Choose your option"></mdb-select>
  <label>Example label</label>
</div>
</div>

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'select-events',
templateUrl: './select-events.component.html',
styleUrls: ['./select-events.component.scss'],
})
export class SelectEventsComponent implements OnInit {
optionsSelect: Array<any>;
ngOnInit() {
  this.optionsSelect = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' },
  ];
}

selectChanged(event: any) {
    console.log('selectChanged');
    console.log(event);
}

selectOpened(event: any) {
  console.log('selectOpened');
  console.log(event);
}

selectClosed(event: any) {
  console.log('selectClosed');
  console.log(event);
}

optionSelected(event: any) {
  console.log('optionSelected');
  console.log(event);
}

optionDeselected(event: any) {
  console.log('optionDeselected');
  console.log(event);
}

noOptionsFound(event: any) {
  console.log('noOptionsFound');
  console.log(event);
}
}

API Reference:

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 Multiselect:
// MDB Angular Pro
import { SelectModule, WavesModule } from 'ng-uikit-pro-standard'