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, it brings a lot of UX value.

Examples of Bootstrap Multiselect use include:

  • Ingredient choice within a pizza delivery system
  • Laptop hardware configuration in an online shop
  • Flight booking customization

This documentation may contain syntax introduced in the MDB Angular 9.3.0 and can be incompatible with previous versions. For old multiselect documentation please follow the link.

Live example

Default select

        
            
              <select class="browser-default custom-select">
                <option selected>Open this select menu</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
              </select>

Material select MDB Pro component 

        
            
              <div class="md-form">
                <mdb-select-2 [multiple]="true" placeholder="Choose your option" label="Example label">
                  <mdb-select-all-option>Select all</mdb-select-all-option>
                  <mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
                </mdb-select-2>
              </div>
            
        
    
        
            
              import { Component } from '@angular/core';

              @Component({
                selector: 'basic-material-select-example',
                templateUrl: 'basic-material-select.html',
              })
              export class BasicMaterialSelectComponent {
                options = [
                  { value: '1', label: 'Option 1' },
                  { value: '2', label: 'Option 2' },
                  { value: '3', label: 'Option 3' },
                ];
              }

Multiselect with options groups MDB Pro component 

        
            
          <div class="md-form">
            <mdb-select-2 [multiple]="true" placeholder="Choose your option" label="Example label">
              <mdb-option-group *ngFor="let group of groups" [label]="group.name">
                <mdb-select-all-option>Select all</mdb-select-all-option>
                <mdb-select-option *ngFor="let option of group.options" [value]="option.value">{{ option.label }}</mdb-select-option>
              </mdb-option-group>
            </mdb-select-2>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'options-material-select-example',
            templateUrl: 'options-material-select.html',
          })
          export class OptionsMaterialSelectComponent {
            groups = [
              {
                name: 'First group',
                options: [
                  {value: 'first-group-1', label: 'First Group Option 1'},
                  {value: 'first-group-2', label: 'First Group Option 2'},
                ]
              },
              {
                name: 'Second Group',
                options: [
                  {value: 'second-group-1', label: 'Second Group Option 1'},
                  {value: 'second-group-2', label: 'Second Group Option 2'},
                ]
              }
            ];
          }

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">
              <div class="md-form">
                <mdb-select-2 [multiple]="true" [disabled]="disabled" placeholder="Choose your option" label="Example label">
                  <mdb-select-all-option>Select all</mdb-select-all-option>
                  <mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
                </mdb-select-2>
              </div>
            </div>
            <div class="col-md-6">
              <div class="md-form">
                <mdb-select-2 [multiple]="true" placeholder="Choose your option" label="Example label">
                  <mdb-select-all-option>Select all</mdb-select-all-option>
                  <mdb-select-option *ngFor="let option of options" [value]="option.value" [disabled]="option.disabled">{{ option.label }}</mdb-select-option>
                </mdb-select-2>
              </div>
            </div>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'disabled-material-select-example',
            templateUrl: 'disabled-material-select.html',
          })
          export class DisabledMaterialSelectComponent {
            disabled = true;
            options = [
              { value: '1', label: 'Option 1', disabled: true },
              { value: '2', label: 'Option 2', disabled: false },
              { value: '3', label: 'Option 3', disabled: false },
            ];
          }

Template-driven forms MDB Pro component

In this section, you will find on how to use our select component in template-driven forms.

Remember to import the FormsModule into your app.module.ts file.

Preselected value

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

        
            
          <div class="md-form">
            <mdb-select-2 [multiple]="true" placeholder="Choose your option" label="Example label" [(ngModel)]="selectedValue">
              <mdb-select-all-option>Select all</mdb-select-all-option>
              <mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
            </mdb-select-2>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'defaultvalue-material-select-example',
            templateUrl: 'defaultvalue-material-select.html',
          })
          export class DefaultValueMaterialSelectComponent {
            options = [
              { value: '1', label: 'Option 1' },
              { value: '2', label: 'Option 2' },
              { value: '3', label: 'Option 3' },
            ];

            selectedValue = ['1'];
          }

Get selected value

Get selected value with the ngModelChange event, which fires every time you select an option.

        
            
          <div class="md-form">
            <mdb-select-2 [multiple]="true" placeholder="Choose your option" label="Example label" (ngModelChange)="getSelectedValue($event)" [ngModel]="selectedValue">
              <mdb-select-all-option>Select all</mdb-select-all-option>
              <mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
            </mdb-select-2>
          </div>
        
        
    
        
            
          import { Component, OnInit } from '@angular/core';

          @Component({
            selector: 'getvalue-material-select-example',
            templateUrl: 'getvalue-material-select.html',
          })
          export class GetValueMaterialSelectComponent implements OnInit {
            options = [
              { value: '1', label: 'Option 1' },
              { value: '2', label: 'Option 2' },
              { value: '3', label: 'Option 3' },
            ];

            selectedValue = ['1'];

            getSelectedValue(value: any) {
              console.log('Selected value:', value);
            }
          }

Reactive forms MDB Pro component

In this section, you will find information on how to use our select component in reactive forms.

Remember to import the ReactiveFormsModule into your app.module.ts file.

Preselected value

Set the default value in FormControl

        
            
          <div class="md-form">
            <mdb-select-2 [multiple]="true" placeholder="Choose your option" label="Example label" [formControl]="selectControl">
              <mdb-select-all-option>Select all</mdb-select-all-option>
              <mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
            </mdb-select-2>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { FormControl } from '@angular/forms';

          @Component({
            selector: 'defaultvalue-material-select-example',
            templateUrl: 'defaultvalue-material-select.html',
          })
          export class DefaultValueMaterialSelectComponent {
            selectControl = new FormControl(['1']);

            options = [
              { value: '1', label: 'Option 1' },
              { value: '2', label: 'Option 2' },
              { value: '3', label: 'Option 3' },
            ];
          }

Get selected value

Get the selected value with the reactive forms valueChanged method.

        
            
          <div class="md-form">
            <mdb-select-2 [multiple]="true" placeholder="Choose your option" label="Example label" [formControl]="selectControl">
              <mdb-select-all-option>Select all</mdb-select-all-option>
              <mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
            </mdb-select-2>
          </div>
        
        
    
        
            
          import { Component, OnInit } from '@angular/core';
          import { FormGroup, FormControl } from '@angular/forms';

          @Component({
            selector: 'getvalue-material-select-example',
            templateUrl: 'getvalue-material-select.html',
          })
          export class GetValueMaterialSelectComponent implements OnInit {
            selectControl = new FormControl(['1']);

            options = [
              { value: '1', label: 'Option 1' },
              { value: '2', label: 'Option 2' },
              { value: '3', label: 'Option 3' },
            ];

            ngOnInit() {
              this.selectControl.valueChanges.subscribe((value: any) => {
                console.log('Selected value:', value);
              })
            }
          }

Object as option value

        
            
          <div class="md-form">
            <mdb-select-2 [multiple]="true" placeholder="Choose your option" label="Example label" [(ngModel)]="selectedValue" [compareWith]="compareFn">
              <mdb-select-all-option>Select all</mdb-select-all-option>
              <mdb-select-option *ngFor="let option of options" [value]="option">{{ option.label }}</mdb-select-option>
            </mdb-select-2>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'basic-material-select-example',
            templateUrl: 'basic-material-select.html',
          })
          export class BasicMaterialSelectComponent {
            options = [
              { value: '1', label: 'Option 1' },
              { value: '2', label: 'Option 2' },
              { value: '3', label: 'Option 3' },
            ];

            selectedValue = [{ value: '2', label: 'Option 2' }];

            compareFn(o1: any, o2: any): boolean {
              return o1 && o2 ? o1.value === o2.value : o1 === o2;
            }
          }

Outline version MDB Pro component

Use the [outline] input to make the Material Select outline like in Material 2.0.

        
            
          <div class="md-form">
            <mdb-select-2 [outline]="true" placeholder="Choose your option" label="Example label">
              <mdb-select-all-option>Select all</mdb-select-all-option>
              <mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
            </mdb-select-2>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'outline-select',
            templateUrl: 'outline-select.component.html',
          })
          export class OutlineSelectComponent {
            options = [
              { 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.

This documentation may contain syntax introduced in the MDB Angular 9.3.0 and can be incompatible with previous versions. For old timepicker documentation please follow the link.

Live example

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:
        
            
          import { MdbSelectModule } from 'ng-uikit-pro-standard';
          import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
Import example Modules list

Components

Select

Selector: mdb-select-2

Type: MdbSelectComponent

Select filter

Selector: mdb-select-filter

Type: MdbSelectFilterComponent

Inputs

Name Type Default Description Example
dropdownClass string ' ' Pass here a css class which you want to add on the internal element of mdb-select [dropdownClass]="'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"
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"
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 48 Changes the single option height vavlue optionHeight="50"
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)"
opened EventEmitter<any> Event fired when the select is opened (opened)="selectOpened($event)"
valueChanged EventEmitter<any> Event fired when the select value is changed (changed)="valueChanged($event)"

Angular Multiselect - examples & customization

This documentation may contain syntax introduced in the MDB Angular 9.3.0 and can be incompatible with previous versions. For old timepicker documentation please follow the link.

Live example

Color variations MDB Pro component 

        
            
          <div class="md-form">
            <mdb-select-2
              [multiple]="true"
              placeholder="Choose your option"
              label="Example label"
              [dropdownClass]="'mdb-select-dropdown-colorful mdb-select-dropdown-primary'"
            >
              <mdb-select-all-option>Select all</mdb-select-all-option>
              <mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
            </mdb-select-2>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

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

          export class ColorMaterialSelectComponent {
            options = [
              { value: '1', label: 'Option 1' },
              { value: '2', label: 'Option 2' },
              { value: '3', label: 'Option 3' },
            ];
          }

In order to change a select color use one of the following classes:

1. .mdb-select-dropdown-primary

2. .mdb-select-dropdown-danger

3. .mdb-select-dropdown-default

4. .mdb-select-dropdown-secondary

5. .mdb-select-dropdown-success

6. .mdb-select-dropdown-info

7. .mdb-select-dropdown-warning

8. .mdb-select-dropdown-ins

9. .mdb-select-dropdown-dark

Multiselect with icons MDB Pro component 

        
            
          <div class="md-form">
            <mdb-select-2
              [multiple]="true"
              placeholder="Choose your option"
              label="Example label"
              [dropdownClass]="'mdb-select-dropdown-colorful mdb-select-dropdown-primary'"
            >
              <mdb-select-all-option>Select all</mdb-select-all-option>
              <mdb-select-option *ngFor="let option of options" [value]="option">
                <div class="d-flex justify-content-between align-items-center">
                  <span>{{ option.label }}</span>
                  <img [src]="option.icon" class="rounded-circle" height="34" width="34">
                </div>
              </mdb-select-option>
            </mdb-select-2>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'icons-material-select-example',
            templateUrl: 'icons-material-select.html',
          })
          export class IconsMaterialSelectComponent {
            options = [
              { value: '1', label: 'Option 1', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp' },
              { value: '2', label: 'Option 2', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp' },
              { value: '3', label: 'Option 3', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp' },
            ];
          }

Multiselect with custom template MDB Pro component 

        
            
          <div class="md-form">
            <mdb-select-2 [multiple]="true" [outline]="true" placeholder="Choose your option" label="Example label">
              <mdb-select-all-option>Select all</mdb-select-all-option>
              <mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
              <button mdbBtn color="primary" size="sm" block="true">Button</button>
            </mdb-select-2>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
          selector: 'select-with-template',
          templateUrl: 'select-with-template.component.html',
          })

          export class SelectWithTemplateComponent {
            options = [
              { value: '1', label: 'Option 1' },
              { value: '2', label: 'Option 2' },
              { value: '3', label: 'Option 3' },
            ];
          }