Angular Bootstrap select

Angular Select - Bootstrap 4 & Material Design

Angular Bootstrap select is a component which 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" label="Example label"></mdb-select>
              </div>
            </div>

          

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

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

            export class BasicMaterialSelectComponent implements OnInit {

            optionsSelect: Array<any>;
              ngOnInit() {
                this.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, 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' },
            ];
            }
          }

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

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

        export class OptionsMaterialSelectComponent 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 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, 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 select 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'}]


        <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: 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 select component in template-driven forms.

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

Preselected value

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


        <mdb-select [(ngModel)]="selectedValue" [options]="dateOptionsSelect" 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';

Get selected value

Get selected value with 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, OnInit } from '@angular/core';

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

        export class GetValueMaterialSelectComponent 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';

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

Reactive forms MDB Pro component

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

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

Preselected value

Set 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 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')
            });
          }

Get selected value

Get selected value with 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, 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 {

          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 value:', value);
            });
          }

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

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

        export class ColorMaterialSelectComponent implements OnInit {

        colorSelect: Array<any>;
          ngOnInit() {
          this.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, OnInit } from '@angular/core';

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

        export class IconsMaterialSelectComponent implements OnInit {

        iconsSelect: Array<any>;
          ngOnInit() {
          this.iconsSelect = [
            { 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' },
          ];
          }
          }