Angular Bootstrap Select

Angular Select - Bootstrap 4 & Material Design

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.

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

Default select

Show code

HTML

        
            
              <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

Show code

HTML
Typescript

        
            
              <div class="md-form">
                <mdb-select-2 placeholder="Choose your option" label="Example label">
                  <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' },
                ];
              }

Multiple select MDB Pro component

Show code

HTML
Typescript

        
            
          <div class="md-form">
            <mdb-select-2 [multiple]="true" placeholder="Choose your option" label="Example label">
              <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: 'multiple-material-select-example',
            templateUrl: 'multiple-material-select.html',
          })
          export class MultipleMaterialSelectComponent {
            options = [
              { value: '1', label: 'Option 1' },
              { value: '2', label: 'Option 2' },
              { value: '3', label: 'Option 3' },
            ];
          }

Options groups MDB Pro component

Show code

HTML
Typescript

        
            
          <div class="md-form">
            <mdb-select-2 placeholder="Choose your option" label="Example label">
              <mdb-option-group *ngFor="let group of groups" [label]="group.name">
                <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 select MDB Pro component

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

Show code

HTML
Typescript

        
            
          <div class="row">
            <div class="col-md-6">
              <div class="md-form">
                <mdb-select-2 [disabled]="disabled" placeholder="Choose your option" label="Example label">
                  <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 placeholder="Choose your option" label="Example label">
                  <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

Show code

HTML
Typescript

        
            
          <div class="md-form">
            <mdb-select-2 placeholder="Choose your option" label="Example label" [(ngModel)]="selectedValue">
              <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.

Show code

HTML
Typescript

        
            
          <div class="md-form">
            <mdb-select-2 placeholder="Choose your option" label="Example label" (ngModelChange)="getSelectedValue($event)" [ngModel]="selectedValue">
              <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

Show code

HTML
Typescript

        
            
          <div class="md-form">
            <mdb-select-2 placeholder="Choose your option" label="Example label" [formControl]="selectControl">
              <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.

Show code

HTML
Typescript

        
            
          <div class="md-form">
            <mdb-select-2 placeholder="Choose your option" label="Example label" [formControl]="selectControl">
              <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 { 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

Show code

HTML
Typescript

        
            
          <div class="md-form">
            <mdb-select-2 placeholder="Choose your option" label="Example label" [(ngModel)]="selectedValue" [compareWith]="compareFn">
              <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 and md-outline class to make the Material Select outline like in Material 2.0.

Show code

HTML
Typescript

        
            
          <div class="md-form md-outline">
            <mdb-select-2 [outline]="true" placeholder="Choose your option" label="Example label">
              <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 Select - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of select 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:

Show code

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

Methods

You can get access to the select methods from another component. Add template reference variable to your mdb-select-2 component in the HTML file

<mdb-select-2 #select></mdb-select-2>

Then in your typescript file use the @ViewChild decorator to get access to the MdbSelectComponent methods

@ViewChild('select', { static: true }) select: MdbSelectComponent

MdbSelectComponent

Name	Description	Example
`close`	Closes the select dropdown	`this.select.close()`
`open`	Opens the select dropdown	`this.select.open()`

Angular Select - 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

Show code

HTML
Typescript

        
            
          <div class="md-form">
            <mdb-select-2 placeholder="Choose your option" label="Example label" [dropdownClass]="'mdb-select-dropdown-colorful mdb-select-dropdown-primary'">
              <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

Select with icons MDB Pro component

Show code

HTML
Typescript

        
            
          <div class="md-form">
            <mdb-select-2 placeholder="Choose your option" label="Example label" [dropdownClass]="'mdb-select-dropdown-colorful mdb-select-dropdown-primary'">
              <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' },
            ];
          }

Select with search box MDB Pro component

Show code

HTML
Typescript

        
            
          <div class="md-form">
            <mdb-select-2 placeholder="Choose your option" label="Example label">
              <mdb-select-filter
                [ngModel]="searchText | async"
                (ngModelChange)="searchText.next($event)">
              </mdb-select-filter>
              <mdb-select-option *ngFor="let option of filteredOptions | async" [value]="option">{{ option.label }}</mdb-select-option>
            </mdb-select-2>
          </div>

        
            
          import { Component } from '@angular/core';
          import { Subject, Observable } from 'rxjs';
          import { startWith, map } from 'rxjs/operators';

          @Component({
            selector: 'search-box-select',
            templateUrl: './search-box-select.component.html',
            styleUrls: ['./search-box-select.component.scss']
          })
          export class SearchBoxSelectComponent {
            searchText = new Subject<string>();
            filteredOptions: Observable<any[]>;

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

            constructor() {
              this.filteredOptions = this.searchText.pipe(
                startWith(''),
                map((value: string) => this.filter(value))
              );
            }

            filter(value: string): any[] {
              const filterValue = value.toLowerCase();
              return this.options.filter((option: any) => option.label.toLowerCase().includes(filterValue));
            }
          }

Select with custom template MDB Pro component

Show code

HTML
Typescript

        
            
          <div class="md-form">
            <mdb-select-2 [outline]="true" placeholder="Choose your option" label="Example label">
              <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' },
            ];
          }