Select
Angular Bootstrap 5 Select component
Select fields components are used for collecting user provided information from a list of options.
Basic example
Basic example of select component that allows you to choose from a number of options.
<mdb-form-control>
<mdb-select>
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
options = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
{ value: '4', label: 'Four' },
{ value: '5', label: 'Five' },
{ value: '6', label: 'Six' },
{ value: '7', label: 'Seven' },
{ value: '8', label: 'Eigth' },
];
}
Multiselect
Add [multiple]="true" input to the select element to activate multiple mode.
<mdb-form-control>
<mdb-select [multiple]="true">
<mdb-select-all-option>Select all</mdb-select-all-option>
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
options = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
{ value: '4', label: 'Four' },
{ value: '5', label: 'Five' },
{ value: '6', label: 'Six' },
{ value: '7', label: 'Seven' },
{ value: '8', label: 'Eigth' },
];
}
Select with label
It is possible to add select label by creating element with
mdbLabel directive and .form-label class.
<mdb-form-control>
<mdb-select>
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
options = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
{ value: '4', label: 'Four' },
{ value: '5', label: 'Five' },
{ value: '6', label: 'Six' },
{ value: '7', label: 'Seven' },
{ value: '8', label: 'Eigth' },
];
}
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.
<mdb-form-control>
<mdb-select placeholder="Example placeholder">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
</mdb-form-control>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
options = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
{ value: '4', label: 'Four' },
{ value: '5', label: 'Five' },
{ value: '6', label: 'Six' },
{ value: '7', label: 'Seven' },
{ value: '8', label: 'Eigth' },
];
}
Disabled select
Add [disabled]="true" input to the select element to disable the component.
<mdb-form-control>
<mdb-select [disabled]="true">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
options = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
{ value: '4', label: 'Four' },
{ value: '5', label: 'Five' },
{ value: '6', label: 'Six' },
{ value: '7', label: 'Seven' },
{ value: '8', label: 'Eigth' },
];
}
Disabled options
Use disabled input on option element to disable specific option.
<mdb-form-control>
<mdb-select>
<mdb-option *ngFor="let option of options" [value]="option.value" [disabled]="option.disabled">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
options = [
{ value: '1', label: 'One', disabled: false },
{ value: '2', label: 'Two', disabled: true },
{ value: '3', label: 'Three', disabled: true },
{ value: '4', label: 'Four', disabled: false },
{ value: '5', label: 'Five', disabled: true },
{ value: '6', label: 'Six', disabled: false },
{ value: '7', label: 'Seven', disabled: false },
{ value: '8', label: 'Eigth', disabled: false },
];
}
Custom content
A custom content container with a class .select-custom-content will be displayed
at the end of the select dropdown.
<mdb-form-control>
<mdb-select>
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
<div class="select-custom-content">
<button class="btn-save btn btn-primary btn-sm">Save</button>
</div>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
options = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
{ value: '4', label: 'Four' },
{ value: '5', label: 'Five' },
{ value: '6', label: 'Six' },
{ value: '7', label: 'Seven' },
{ value: '8', label: 'Eigth' },
];
}
Visible options
Use visibleOptions input to change the number of options that will be displayed
in the select dropdown without scrolling.
<mdb-form-control>
<mdb-select [visibleOptions]="3">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
options = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
{ value: '4', label: 'Four' },
{ value: '5', label: 'Five' },
{ value: '6', label: 'Six' },
{ value: '7', label: 'Seven' },
{ value: '8', label: 'Eigth' },
];
}
Secondary text
Add container with class .option-secondary-text to the specific options to
display secondary text.
<mdb-form-control>
<mdb-select>
<mdb-option *ngFor="let option of options" [value]="option.value" [label]="option.label">{{
option.label
}}
<span class="option-secondary-text">Secondary text</span>
</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
options = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
{ value: '4', label: 'Four' },
{ value: '5', label: 'Five' },
{ value: '6', label: 'Six' },
{ value: '7', label: 'Seven' },
{ value: '8', label: 'Eigth' },
];
}
Search
Set filter input to true to enable options filtering.
<mdb-form-control>
<mdb-select [filter]="true">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}
</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
options = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
{ value: '4', label: 'Four' },
{ value: '5', label: 'Five' },
{ value: '6', label: 'Six' },
{ value: '7', label: 'Seven' },
{ value: '8', label: 'Eigth' },
];
}
Option groups
It is possible to group options by using mdb-option-group component.
<mdb-form-control>
<mdb-select>
<mdb-option-group *ngFor="let group of groups" [label]="group.name">
<mdb-option *ngFor="let option of group.options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-option-group>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
groups = [
{
name: 'Label 1',
options: [
{ value: 'first-group-1', label: 'One' },
{ value: 'first-group-2', label: 'Two' },
{ value: 'first-group-3', label: 'Three' },
],
},
{
name: 'Label 2',
options: [
{ value: 'second-group-4', label: 'Four' },
{ value: 'second-group-5', label: 'Five' },
{ value: 'second-group-6', label: 'Six' },
],
},
];
}
Select with icons
Add conatiner with option-icon-container class to the specific option to display
option icon.
<mdb-form-control>
<mdb-select>
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}
<span class="option-icon-container">
<img class="option-icon rounded-circle" [src]="option.icon" />
</span>
</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
options = [
{ value: '1', label: 'One', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp' },
{ value: '2', label: 'Two', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp' },
{ value: '3', label: 'Three', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp' },
{ value: '4', label: 'Four', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-4.webp' },
{ value: '5', label: 'Five', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-5.webp' },
];
}
Set value
It is possible to set default value using Angular reactive or template driven forms methods.
Reactive forms
Create new formControl with a value (or array of values in multiselect) to
select option with corresponding value.
<mdb-form-control>
<mdb-select [formControl]="selectedValue">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
selectedValue = new FormControl('4');
options = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
{ value: '4', label: 'Four' },
{ value: '5', label: 'Five' },
{ value: '6', label: 'Six' },
{ value: '7', label: 'Seven' },
{ value: '8', label: 'Eigth' },
];
}
Template driven forms
Add a value (or array of values in multiselect) to the ngModel to select option
with corresponding value.
<mdb-form-control>
<mdb-select [(ngModel)]="selectedValue">
<mdb-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
selectedValue = '4';
options = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
{ value: '4', label: 'Four' },
{ value: '5', label: 'Five' },
{ value: '6', label: 'Six' },
{ value: '7', label: 'Seven' },
{ value: '8', label: 'Eigth' },
];
}
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 |
filterPlaceholder
|
string | 'Search...' |
Changes select search input placeholder |
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-option *ngFor="let option of options" [value]="option.value"
>{{ option.label }}</mdb-option
>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
options = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
{ value: '4', label: 'Four' },
{ value: '5', label: 'Five' },
{ value: '6', label: 'Six' },
{ value: '7', label: 'Seven' },
{ value: '8', label: 'Eigth' },
];
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-option *ngFor="let option of options" [value]="option.value">{{
option.label
}}</mdb-option>
</mdb-select>
<label mdbLabel class="form-label">Example label</label>
</mdb-form-control>
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MdbSelectComponent } from 'mdb-angular-ui-kit/select';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent implements AfterViewInit {
@ViewChild('select', { static: true }) select!: MdbSelectComponent;
options = [
{ value: '1', label: 'One' },
{ value: '2', label: 'Two' },
{ value: '3', label: 'Three' },
{ value: '4', label: 'Four' },
{ value: '5', label: 'Five' },
{ value: '6', label: 'Six' },
{ value: '7', label: 'Seven' },
{ value: '8', label: 'Eigth' },
];
ngAfterViewInit(): void {
Promise.resolve().then(() => {
this.select.open();
});
}
}