Select

Angular Bootstrap 5 Select component

Select fields components are used for collecting user provided information from a list of options.


Basic example


Multiselect

Add [multiple]="true" input to the select element to activate multiple mode.


Select with label

It is possible to add select label by creating element with mdbLabel directive and .form-label class.


Select with placeholder

Use placeholder option to set placeholder for select input. The placeholder will be displayed when input is focused and no option is selected.


Disabled select

Add [disabled]="true" input to the select element to disable the component.


Disabled options

Use disabled input on option element to disable specific option.


Clear button

Set clearButton option to true to display the button that will allow to clear current selections.


Custom content

A custom content container with a class .select-custom-content will be displayed at the end of the select dropdown.


Visible options

Use visibleOptions input to change the number of options that will be displayed in the select dropdown without scrolling.


Secondary text

Add container with class .select-option-secondary-text to the specific options to display secondary text.



Option groups

It is possible to group options by using mdb-option-group component.


Select with icons

Add conatiner with .select-option-icon-container class to the specific option to display option icon.


Set value

It is possible to set default value using Angular reactive or template driven forms methods.


Reactive forms

Create new formContorl with a value (or array of values in multiselect) to select option with corresponding value.


Template driven forms

Add a value (or array of values in multiselect) to the ngModel to select option with corresponding value.

Select - API


Import


        import { MdbSelectModule } from 'mdb-angular-ui-kit/select';
        …
        @NgModule ({
          ...
          imports: [MdbSelectModule],
          ...
        })
      

Inputs

Name Type Default Description
clearButton boolean false Adds clear button to the select input
disabled boolean false Changes select input state to disabled
multiple boolean false Enables selecting multiple options
notFoundMsg 'No results found' Defines custom not found message for select search box
placeholder string '' Defines placeholder for select input element
visibleOptions number 5 Changes number of visible options in options list
optionHeight number 38 Changes the single option height vavlue

Outputs

Name Type Description
closed EventEmitter<any> Event fired when the select is closed
opened EventEmitter<any> Event fired when the select is opened
valueChange EventEmitter<any> Event fired when the select value is changed

            <mdb-form-control>
              <mdb-select (opened)="onSelectOpen()">
                <mdb-select-option *ngFor="let option of options" [value]="option.value"
                  >{{ option.label }}</mdb-select-option
                >
              </mdb-select>
              <label mdbLabel class="form-label">Example label</label>
            </mdb-form-control>
          

            onSelectOpen() { console.log('select open'); }
          

Methods

Name Description Example
close Manually close the component select.close()
open Manually open the component select.open()

              <mdb-form-control>
                <mdb-select #select>
                  <mdb-select-option *ngFor="let option of options" [value]="option.value">{{
                    option.label
                  }}</mdb-select-option>
                </mdb-select>
                <label mdbLabel class="form-label">Example label</label>
              </mdb-form-control>
            

              @ViewChild('select') select: MdbSelectComponent;

              ngAfterViewInit(): void {
                this.select.open();
              }