Angular Bootstrap Select

Angular Select - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap select is a component that displays a collapsable list of multiple values which can be used in forms, menus or surveys.

MDB provides you a variety of options and variations.

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="row">
                <div class="col-md-6">
                  <mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
                </div>
              </div>
           
        
    
        
            
              import { Component } from '@angular/core';

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

Multiple select MDB Pro component 

        
            
          <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 } from '@angular/core';

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

Options groups MDB Pro component 

        
            
          <div class="row">
            <div class="col-md-6">
              <mdb-select [options]="groupOptionsSelect" placeholder="Choose your option" label="Example label"></mdb-select>
            </div>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';
          @Component({
            selector: 'options-material-select-example',
            templateUrl: 'options-material-select.html',
          })
          export class OptionsMaterialSelectComponent {
            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 select 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" placeholder="Choose your option" label="Example label"></mdb-select>
            </div>
            <div class="col-md-6">
              <mdb-select [options]="disOptionsSelect" placeholder="Choose your option" label="Example label"></mdb-select>
            </div>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

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

            disabled = true;

            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 select options dynamically, the mdb-select component uses the Angular change detection mechanism. Since Angular only checks if an array reference has changed, the component will not detect a change when you the add new option with the push method:

this.selectOptions.push({ value: '4', label: 'Option 4' })

Instead you need to do the following:

this.selectOptions = [...this.selectOptions, { value: '4', label: 'Option 4'}]

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

            ngOnInit() {
              setTimeout(() => {
                this.optionsSelect = [...this.optionsSelect, { value: '4', label: 'Option 4' }];
              }, 3000);
            }
          }

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

        
            
          <mdb-select [(ngModel)]="selectedValue" [options]="dateOptionsSelect" placeholder="Choose time period"></mdb-select>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'defaultvalue-material-select-example',
            templateUrl: 'defaultvalue-material-select.html',
          })
          export class DefaultValueMaterialSelectComponent {
            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';
          }

Get selected value

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

        
            
          <mdb-select (ngModelChange)="getSelectedValue($event)" [(ngModel)]="selectedValue" [options]="dateOptionsSelect"
            placeholder="Choose time period"></mdb-select>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'getvalue-material-select-example',
            templateUrl: 'getvalue-material-select.html',
          })
          export class GetValueMaterialSelectComponent {
            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';

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

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

        
            
          <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-material-select-example',
            templateUrl: 'defaultvalue-material-select.html',
          })
          export class DefaultValueMaterialSelectComponent {
            testForm: FormGroup;

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

            constructor() {
              this.testForm = new FormGroup({
                testSelect: new FormControl('1')
              });
            }
          }

Get selected value

Get the selected value with the reactive forms valueChanged method.

        
            
          <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 } from '@angular/core';
          import { FormGroup, FormControl } from '@angular/forms';

          @Component({
            selector: 'getvalue-material-select-example',
            templateUrl: 'getvalue-material-select.html',
          })
          export class GetValueMaterialSelectComponent {
            testForm: FormGroup;

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

            constructor() {
              this.testForm = new FormGroup({
                testSelect: new FormControl('')
              });
              this.testForm.get('testSelect').valueChanges.subscribe( (value) => {
                console.log('Selected value:', value);
              });
            }
          }

Object as option value

From version 8.4.0 it is possible to use object as option value parameters. In order to do that, it is necessary to customize the default option comparison algorithm. You can do that thanks to [compareWith] input. This input takes a function which has two arguments: option1 and option2. The component selects option by the return value of the function.

        
            
          <div class="row">
            <div class="col-md-6">
              <mdb-select
                [options]="optionsSelect"
                [compareWith]="compareFn"
                placeholder="Choose your option"
                [(ngModel)]="selectedValue"
              ></mdb-select>
            </div>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'basic-material-select-example',
            templateUrl: 'basic-material-select.html',
          })
          export class BasicMaterialSelectComponent implements OnInit {
            optionsSelect = [
              { value: { value: '1', label: 'Option 1' }, label: 'Option 1' },
              { value: { value: '2', label: 'Option 2' }, label: 'Option 2' },
              { value: { value: '3', label: 'Option 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.

        
            
          <mdb-select [outline]="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 Select - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of select 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:
        
            
          import { SelectModule } from 'ng-uikit-pro-standard';
          import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
Import example Modules list

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 [appendToBody]="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 Select - examples & customization

Color variations MDB Pro component 

        
            
          <div class="row">
            <div class="col-md-6">
              <mdb-select [options]="colorSelect" label="Blue select" placeholder="Choose your option" class="colorful-select dropdown-primary"></mdb-select>
            </div>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'color-material-select-example',
            templateUrl: 'color-material-select.html',
          })
          export class ColorMaterialSelectComponent {
            colorSelect = [
              { value: '1', label: 'Option 1' },
              { value: '2', label: 'Option 2' },
              { value: '3', label: 'Option 3' },
              { value: '4', label: 'Option 4' },
              { value: '5', label: 'Option 5' },
            ];
          }

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

1. .dropdown-primary

2. .dropdown-danger

3. .dropdown-default

4. .dropdown-secondary

5. .dropdown-success

6. .dropdown-info

7. .dropdown-warning

8. .dropdown-ins

9. .dropdown-dark

Select with icons MDB Pro component 

        
            
          <div class="row">
            <div class="col-md-6">
              <mdb-select [options]="iconsSelect" placeholder="Choose your option" label="Example label"></mdb-select>
            </div>
          </div>
        
        
    
        
            
        import { Component } from '@angular/core';

        @Component({
          selector: 'icons-material-select-example',
          templateUrl: 'icons-material-select.html',
        })
        export class IconsMaterialSelectComponent {
          iconsSelect = [
            { 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' },
          ];
        }

Customize toggle icon MDB Pro component

Use different font awesome icon:

        
            
          <div class="row">
            <div class="col-md-6">
              <mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
            </div>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'customize-toggle-select-example',
            templateUrl: 'customize-toggle-select.html',
          })
          export class CustomizeToggleSelectComponent {
            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" placeholder="Choose your option"></mdb-select>
            </div>
          </div>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'customize-toggle-select-example',
            templateUrl: 'customize-toggle-select.html',
          })
          export class CustomizeToggleSelectComponent {
            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: '';
          }

Select with custom template MDB Pro component

Use custom template inside mdb-select element.

        
            
          <mdb-select [options]="optionsSelect" placeholder="Choose your option">
            <button mdbBtn color="primary" size="sm" block="true" mdbWavesEffect>Button</button>
          </mdb-select>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'select-with-template',
            templateUrl: 'select-with-template.component.html',
          })
          export class SelectWithTemplateComponent {
            optionsSelect = [
              { value: '1', label: 'Option 1' },
              { value: '2', label: 'Option 2' },
              { value: '3', label: 'Option 3' },
            ];
          }