Angular Bootstrap select

Material Design version

Our Material Select is a beautiful alternative for standard select.

MDB provides you a variety of options and variations.

Basic example MDB Pro component

Example label



    
        
        Example label


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

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

export class BasicMaterialSelectComponent implements OnInit {

    optionsSelect: Array;
    ngOnInit() {
        this.optionsSelect = [
            { value: '1', label: 'Option 1' },
            { value: '2', label: 'Option 2' },
            { value: '3', label: 'Option 3' },
        ];
    }
}

Color variations MDB Pro component

Blue select

Red select

Teal select

Purple select

Green select

Light blue select

Orange select

Blue grey select

Dark select



    
        
        Blue select


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

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

export class ColorMaterialSelectComponent implements OnInit {

    colorSelect: Array;
    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

Multiple select MDB Pro component

Example label



    
        
        Example label


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

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

export class MultipleMaterialSelectComponent implements OnInit {

    optionsSelect: Array;
    ngOnInit() {
        this.optionsSelect = [
            { value: '1', label: 'Option 1' },
            { value: '2', label: 'Option 2' },
            { value: '3', label: 'Option 3' },
        ];
    }
}

Options groups MDB Pro component

Example label



    
        
        Example label


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

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

export class OptionsMaterialSelectComponent implements OnInit {

    groupOptionsSelect: Array;
    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' },
        ];
    }
}

Select with icons MDB Pro component

Example label



    
        
        Example label


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

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

export class IconsMaterialSelectComponent implements OnInit {

    iconsSelect: Array;
    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' },
        ];
    }
}

Disabled select MDB Pro component

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

Example label



    
        
        Example label
    
    
        
        Example label


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

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

export class DisabledMaterialSelectComponent implements OnInit {

    optionsSelect: Array;
    disabled: boolean = true;
    disOptionsSelect: Array;

    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' } ,
        ];
    }
}

Browser default select

Just add a .browser-default class to the select tag.

Browser default Select


<label>Default Select</label>
<select class="browser-default">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Default value in select

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


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';

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

Get selected value

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


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

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

Configuration options

Here you can find configuration options of Material Select

Name	Type	Default	Description
filterEnabled	boolean	false	If true, filtering options using keyboard in Material Select is enabled
multiple	boolean	false	If true, selecting multiple options is enabled
notFoundMsg	string	null	If set, defines custom not found message.For example: notFoundMsg="Country not found"
highlightColor	string	null	If set, highlight hovered element with background color. For example: highlightColor="yellow" set background color on hover to yellow.
disabled	boolean	false	If true, disable some of select options
customClass	string	null	Adds custom class for labels, for example: customClass="'filled-in'"

Available events

Here you can find events which are fired by Material Select

Name	Usage	Description
opened	(opened)="selectOpened($event)"	The event is fired when the select is opened.
closed	(closed)="selectClosed($event)"	The event is fired when the select is closed.
selected	(selected)="optionSelected($event)"	The event is fired when the item is selected.
deselected	(deselected)="optionDeselected($event)"	The event is fired when the item is deselected - only if [multiple]="true".
noOptionsFound	(noOptionsFound)="noOptionsFound($event)"	The event is fired when the select has no matching items - only if [filterEnabled]="true".



  
    
    Example label


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

@Component({
  selector: 'select-events',
  templateUrl: './select-events.component.html',
  styleUrls: ['./select-events.component.scss'],
})
export class SelectEventsComponent implements OnInit {
  optionsSelect: Array;
  ngOnInit() {
    this.optionsSelect = [
      { value: '1', label: 'Option 1' },
      { value: '2', label: 'Option 2' },
      { value: '3', label: 'Option 3' },
    ];
  }

  selectOpened(event: any) {
    console.log('selectOpened');
    console.log(event);
  }

  selectClosed(event: any) {
    console.log('selectClosed');
    console.log(event);
  }

  optionSelected(event: any) {
    console.log('optionSelected');
    console.log(event);
  }

  optionDeselected(event: any) {
    console.log('optionDeselected');
    console.log(event);
  }

  noOptionsFound(event: any) {
    console.log('noOptionsFound');
    console.log(event);
  }
}

API Reference:

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