md-select #118

jelbourn opened this Issue Feb 27, 2016 · 72 comments


None yet

Blocked on both #113 and #84

@jelbourn jelbourn added the feature label Feb 27, 2016
@jelbourn jelbourn added this to the before beta milestone Feb 27, 2016
@jelbourn jelbourn changed the title from mdSelect to md-select Feb 27, 2016
@jelbourn jelbourn added the blocked label Mar 9, 2016

When we can expect a version of select to be available.

@kara kara self-assigned this May 10, 2016
JesusSD commented May 24, 2016

Please make a editable md-select!


Both blockers closed. Can we expect md-select soon?


It would be great if md-select and other similar components (menu, dialog, etc) were based on a foundation component such as material 1 md-panel ($mdPanel). Is the team considering this as a design?

@jelbourn jelbourn removed the blocked label Jul 12, 2016
esinek commented Aug 9, 2016 edited

@jelbourn when do you anticipate the design doc being ready? It's not yet up in the Design doc directory. Since you'll support multi-select (mentioned here), will you also support searching the list (i.e. filtering down the list) in the case of very large lists - to facilitate finding an item less cumbersome? Also, a check-all/clear for multi-select?

abalad commented Sep 9, 2016

There is the possibility of being implemented some things this plugin JS?

fxck commented Sep 17, 2016

@jelbourn @kara could you please answer @esinek's question?

a5hik commented Sep 24, 2016

this is an essential component, looking forward to it.


Hi all congratulations for this project I think is gonna be awesome, but just one thing that I'm seeing here and is the order of components that has been release until now, I think it would better to do things like layouts size, auto-size by device type, and also take care about the most need common form components for example I would be priorize md-select than md-menu or md-tool bar or focus more on md-grid than md-tooltips.


This project is awesome. I was surprised to find that the select field was so low on the priority list. I'm currently working on a form that requires them. I ended up using materialize-css but I know this is a better solution in the long run.

kkotak commented Oct 10, 2016

@mesopotamia - Any pointers on how you integrated materialize-css with A2 material? Aren't there overlaps?

mesopotamia commented Oct 12, 2016 edited


I ended up using only materialize-css for now and will switch back to material2 when it's ready. However, I can imagine that you can use material 2 and import the select.scss from material 2. Dont forget you will need to also import the js module for adding the functionality.

kara commented Nov 1, 2016

Design doc: md-select

esinek commented Nov 1, 2016 edited

@kara thx for the design doc. Looks great! I see the md-select-header will support my previous requests (filtering, check all, uncheck all). I have 3 questions/requests.

  1. You mention the size of the menu will be 5 items. Will there be a way to control that to view more than 5 items?
  2. For very large lists, I've had to add paging to my select list to address performance problems. Do you plan to add something like md-select-footer which could be used to address this?
  3. Will the menu know if it needs to drop up / drop down based on the location of the md-select in the viewport?
haseeb-ahmad commented Nov 2, 2016 edited

@mesopotamia @jelbourn
can you please guide me through adding select tag coz I've tried doing everything I could to make it work along with material.
It says "I'm a select element" and shows no SELECT drop down on the page.
I'll be ok even if I could have a simple html select working without any styling.

haseeb-ahmad commented Nov 2, 2016 edited

Yeah sure... of course, I've read that it is under development. ... and you guys are doing real cool stuff..
What I'm asking is that do you know the real cause of "I'm a select element" and how can I place a simple select tag instead of md-select? Because simple select tag isn't working either.
Do you know a temporary workaround??

nesukun commented Nov 10, 2016

@haseeb-ahmad Using normal select's shouldn't been a problem. I'm using them myself, but I'm not on the lastest version so it might have changed recently

kara commented Nov 10, 2016

@haseeb-ahmad Normal selects work normally. The only selector we use is md-select.


If you guys really need an "md-select" right now, check out this one (while the material2 gets done)

farin99 commented Nov 30, 2016

What is the max number of options md-select will support? Will the items be in the DOM even if the menu isn't open?


dreweird commented Dec 8, 2016

I can't wait for this...

ManishJainGitHubUser commented Dec 10, 2016 edited

What setting needed to download MdSelect with npm or Is it a manual pull? Currently I don't see in it under node_modules/@angular/material.


@ManishJainGitHubUser nothing then to upgrade to alpha-11. Then you can use it out if the box by adding md-select and md-option


Thanks. This worked after a lot of npm update trouble. Here is the syntax:

 <md-select [(ngModel)]="selectedState" placeholder="State">
                <md-option *ngFor="let state of states" [value]="state.value">
alan345 commented Dec 11, 2016 edited

hey, I have this issue
"Can't bind to 'value' since it isn't a known property of 'md-option'"
screen shot 2016-12-10 at 4 37 06 pm
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/material": "2.0.0-alpha.11-3",
Thanks for your help

dahaupt commented Dec 11, 2016

@alan345 Please provide a plunker to reproduce your issue :)

vdclouis commented Dec 11, 2016 edited

@kara @jelbourn will the <md-select> component eventually have functionality a la Select2? (Tag support, ajax loading,...)

phmello commented Dec 11, 2016

Quick question, was it supposed to be working with Reactive Forms yet?

fxck commented Dec 11, 2016

@vdclouis tag support will be part of a different component(chips / autocomplete), ajax loading maybe, but you can really handle that yourself.. another important feature of select2 is search, but since there is not material design spec for that type of select I don't think that will be in either

@phmello yes

phmello commented Dec 11, 2016

thanks @fxck, going to have a go with it

phmello commented Dec 12, 2016

No luck, I've tried

<md-select [formControl]="filterInput">
  <md-option [value]="LON">LON</md-option>
  <md-option [value]="TAN">TAN</md-option>
  <md-option [value]="MEC">MEC</md-option>
  <md-option [value]="ASX">ASX</md-option>

and when I try


Nothing happens, the filterInput has the value 'ASX' but the option is not selected, am I missing something?

nickraphael commented Dec 12, 2016 edited

Anyone having issues with md-radio-button and formControlName? The following is hanging chrome entirely - can't even kill it with task manager!

<md-radio-button value="1" formControlName="roundingOption"></md-radio-button>

fxck commented Dec 12, 2016

@phmello when are you calling that set value? I've had this problem when I tried setting it before md-options were generated.. try delaying it.

mLaird commented Dec 12, 2016

I'm using Angular 2.3.0 and MD.alpha.11-3. I added the md-select below to a template style form. It 'works' in the sense that the selections display, but they display at the bottom of the page, not under the select input display in the form. When I scroll to the bottom and click, the selection shows in the element. Is this a CSS problem or an md-select problem?

<md-select id="country" name="country" class="required" aria-labelledby="country" [(ngModel)]=""
i18n-placeholder="select country placeholder" placeholder="Country">
  <md-option [value]="US" i18n="select US">United States</md-option>
  <md-option [value]="CA" i18n="select CA">Canada</md-option>

The controller has this line of code in the export class section

residenceModel = new ResidenceModel( '', 'NY', '', '','', '', '', ''); 

That's all the code there is to affect md-select. The i18n stuff has no impact. I tried it with and without.

belev commented Dec 12, 2016

@jelbourn @kara I saw that in the md-select project there is a task NONE option but I couldn't see an issue for that.

Is this going to be just another md-option without value which will be added by the user? And if so what do you think about community contribution for that functionality? I will be happy to try to implement it.

joejordanbrown commented Dec 12, 2016 edited

@phmello & @mLaird
Your property value is as if they are variables and not strings. It should be [value]="'string'" not [value]="variable"

<md-select id="country" name="country" class="required" aria-labelledby="country" [(ngModel)]=""
i18n-placeholder="select country placeholder" placeholder="Country">
  <md-option [value]="'US'" i18n="select US">United States</md-option>
  <md-option [value]="'CA'" i18n="select CA">Canada</md-option>

Here is a plunker with it working as it should.


Please excuse my ignorance but the npm site does not show the latest 2.0.0-alpha.11 release, it says the latest version is v2.0.0-alpha.8-2?

how do i npm install the latest version so i can get my hands on the new md-select

dreweird commented Dec 13, 2016 edited

Inside the form the md-select will become red after the second touch of the md-select selector...why is that??

I already disabled the $warn: map-get($theme, warn) in the _select-theme.scss but still not working

kara commented Dec 13, 2016 edited

@dreweird Required selects will become red when invalid and touched (i.e. when there is no value and you've blurred the control). There is a current bug where the select can turn red when the parent form is invalid/touched, but we have a fix for that here. You'll have to wait for it to be merged into master and released before you'll see the change. It's not going to be updated in plunker right now.

@Gallopaway It looks like you're looking at the old NPM package. You'll want the @angular/material package here.

@belev The NONE option will need design and is on my current work board. I wouldn't take on anything with the select right now, given that it's still new and in flux.

@mLaird Do you have a plunker repro for that? Perhaps related to #2178

belev commented Dec 13, 2016

@kara ok, thanks! I will then just keep an eye on the progress of the select.

bnatter commented Dec 13, 2016


I'm having trouble getting a change event to trigger a function.
A click event works but not the change.

Any help?


yosefdishinger commented Dec 14, 2016 edited

@bnatter I had the same problem, I ended up adding a FormControl to my component and linking the md-select to it with [formControl]="myFormControl". Then you can subscribe to the "valueChanges" property of the form control, which is an Observable. This is what we're doing for now (inside ngOnInit), hope this helps.
this.myFormControl = new FormControl();
this.myFormControl.valueChanges.subscribe(val => this.myFunction(val));



From what I see in the code, multi select is not implemented yet, any ETA on this?


narkissbv commented Dec 14, 2016 edited

In the md-select element, style set to:

.md-select-trigger { color: rgba(0, 0, 0, 0.38); border-bottom: 1px solid rgba(0, 0, 0, 0.12);

while in the md-input the style is set to:

.md-input-underline { border-color: rgba(0, 0, 0, 0.38); }

That causes inconsistency with the colors of the borders of input and select elements.
Not mentioning the fact they are not aligned with each other (fixed locally by adding margins 10px to top and bottom of the md-select element).

kara commented Dec 14, 2016 edited

@narkissbv See #2167 and #2124.

@bnatter There isn't a change event on the select; only form directives are supported at this time. If you want to listen to changes, you'll want valueChanges or ngModelChange.


@kara Thank you! Are there plans for the md-select to have the change event in the future?

bnatter commented Dec 15, 2016

@yosefdishinger, @kara : Thanks for the help.

hegde5 commented Dec 16, 2016

@ManishJainGitHubUser Thanks a lot for the syntax!

uncol commented Dec 17, 2016


I create a form for editing. The form contains several 'md-select' which uses the data from the server.
after the main request, I bind (two-way) values with fields in my form, if the data for the option to 'md-select' don't loaded, it field is empty on the screen.

Please, tell me how to correct fill my form.

uncol commented Dec 18, 2016

Is it correct run all slave requests into ngOnInit, main request start execute into ngAfterViewInit lifecycle?


Couldn't find a reference, so I'm asking here. Any chance to control the height of the <md-select> element? My boss doesn't like to have a scroll unless it's needed (e.g: the list is higher than the viewport).

enclosed a screenshot of our <md-select> element with an inner-scroll we would like to get rid of. There are 3 more items in the list, and the viewport has a lot of room for all of them to fit nicely.


@narkissbv you can custom with css by doing something like:

.md-select-panel {
 max-height: 320px

@rafaellyra Kinda hoped for something more sturdy, that will calculate the available height from the top of the <md-select> element, to the bottom of the window (viewport). They already do some positioning magic in that element, so I hoped for a size control as well.

The problem with CSS is that I don't know how many items I will have in each <md-select> element, nor the available height from the top of the element to the bottom of the screen. Those can only be done with JS (or TS with Angular2).

rafaellyra commented Dec 30, 2016 edited

@narkissbv there is no position change on .md-select-panel itself, just on the overlay, the way it works now is something like: check if it fits from the element to the bottom of the view, in case it's true, position it to the bottom, in case it is false check if it fits from the element to the top of the view in case it's true position it to the top, if both are false position it to the bottom, given that, something like:

.md-select-panel {
 max-height: calc(50vh - 30px); //30px should be the height of the select element

should solve your problem of having a scrollbar when there is space on the viewport

Dunos commented Jan 2, 2017

How can we change the color of the select text and separator to other theme style, the "color" property does not work neither "dividerColor"

taokakao commented Jan 3, 2017 edited

After putting select under input inside the card-content there some positioning issues (see screen).
screen shot 2017-01-03 at 22 36 28


How can I preselected an option? when I tried to use [selected], there is an error.


@vivian7169 you need to use ngModel on md-select

public itemSelected: number = 2;

<md-select name="items" [(ngModel)]="itemSelected">
    <md-option value="1">item1</md-option>
    <md-option value="2">item2</md-option>
ajoron commented Jan 6, 2017

Would it be possible to use [ngValue] instead of [value] to bind with a model?
Something like :

<md-select name="items" [(ngModel)]="itemSelected">
     <md-option *ngFor="let poi of pois" [ngValue]="poi">{{}}


biiit commented Jan 6, 2017 edited

@alan345 Make sure to import @angular/forms in your module.

import {MaterialModule} from "@angular/material";
import {FormsModule} from '@angular/forms';

  imports: [MaterialModule.forRoot(), FormsModule]
phmello commented Jan 10, 2017

I think I got a scenario

this.createForm ={
      fieldName: ['']

and them

<md-select formControlName="fieldName" *ngIf="expression">
     <md-option *ngFor="let option of options" [value]="option.value">

When the expression is true and the component is rendered the value is not selected.

zerouno62 commented Jan 10, 2017 edited

I'm using @angular/material@2.0.0-beta.1 and I'm facing the problem that the selection list is always displayed at the bottom of the page. How can I fix that?

Finally I solved the problem by adding a CSS file as discribed in: Since we are working with CLI I did as follows:
If you're using Angular CLI, this is as simple as including one line in your style.css file:
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';


I'm having an issue with md-select not working with reactive forms, it seems the initial value is not getting set, am I doing something wrong or is this a bug? Here is a plnkr....


@zerouno62, I had the same problem menu would shoot up to the top left, had to put position:absolute on the .cdk-overlay-pane class. I used a <style> block in index.html, not ideal but solved my issue

facelesspanda commented Jan 15, 2017 edited

@zerouno62 at least you have a selection list

My md-select doesn't create an overlay, so I'm left with a non-reactive md-select (using 2.0.0-beta.1, and Electron if that's relevant)

Any idea why?

SalmaKolkari commented Jan 16, 2017 edited

Toggling theme not applying for md-select. By default it is applying the light-theme even though we are toggling the theme from light to dark..

ig16022 commented Jan 17, 2017

This was asked previously, but there is no answer - ngValue binding doesn't work with md-option, how can we use md-select with objects as option values?


I am using beta-1 Initial value is not set when data for options are loading form api.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment