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


        <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 groupsMDB Pro component

HTML
TS


        <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' },
          ];
          }
          }

Disabled multiselect MDB Pro component

You can make your select unselectable, by adding [disabled]="disabled" to mdb-select.

Example label

HTML
TS


        <div class="row">
          <div class="col-md-6">
            <mdb-select [options]="optionsSelect" [disabled]="disabled" [multiple]="true" placeholder="Choose your option" label="Example label"></mdb-select>
          </div>
          <div class="col-md-6">
            <mdb-select [options]="disOptionsSelect"  [multiple]="true" 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: 'Disabled option 1', disabled: true },
            { value: '2', label: 'Option 2' } ,
            { value: '3', label: 'Option 3' } ,
            ];
            }
            }

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'}]

HTML
TS


        <div class="row">
          <div class="col-md-6">
            <mdb-select [options]="optionsSelect" [multiple]="true" 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

HTML
TS


        <mdb-select [(ngModel)]="selectedValues" [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.

HTML
TS


        <mdb-select (ngModelChange)="getSelectedValues($event)" [(ngModel)]="selectedValues" [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

HTML
TS


<form [formGroup]="testForm">
  <div class="row">
    <div class="col-md-6">
      <mdb-select [options]="optionsSelect" 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.

HTML
TS


<form [formGroup]="testForm">
  <div class="row">
    <div class="col-md-6">
      <mdb-select [options]="optionsSelect" 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);
            });
          }

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'

Import example Modules list

Components

MdbSelect

Selector: mdb-select

Type: SelectComponent

Inputs

Name	Type	Default	Description	Example
`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"`
`highlightColor`	string	-	Changes options background color on hover	`[highlightColor]="'yellow'"`
`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'"`
`tabindex`	number	0	Changes tabindex of the component	`[tabindex]="-1"`
`visibleOptions`	number	4	Changes number of visible options in options list	`[visibleOptions]="2"`

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)"`

Angular Multiselect - examples & customization

Colorful MultiselectMDB Pro component

HTML
TS


        <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 iconsMDB Pro component

HTML
TS


        <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

HTML
TS


        <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' },
          ];
          }
          }