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 

                            
<div class="row">
    <div class="col-md-6">
        <mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
        <label>Example label</label>
    </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' },
        ];
    } 
}

Color variations MDB Pro component 


<div class="row">
    <div class="col-md-6">
        <mdb-select [options]="colorSelect" placeholder="Choose your option" class="colorful-select dropdown-primary"></mdb-select>
        <label>Blue select</label>
    </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

Multiple select MDB Pro component 


<div class="row">
    <div class="col-md-6">
        <mdb-select [options]="optionsSelect" [multiple]="true" placeholder="Choose your option"></mdb-select>
        <label>Example label</label>
    </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"></mdb-select>
        <label>Example label</label>
    </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' },
        ];
    } 

}

Select with icons MDB Pro component 


<div class="row">
    <div class="col-md-6">
        <mdb-select [options]="iconsSelect" placeholder="Choose your option"></mdb-select>
        <label>Example label</label>
    </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' },
        ];
    } 
}

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"></mdb-select>
        <label>Example label</label>
    </div>
    <div class="col-md-6">
        <mdb-select [options]="disOptionsSelect" placeholder="Choose your option"></mdb-select>
        <label>Example label</label>
    </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' } ,
        ];

    }      
        
}

Browser default select

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



<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



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

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