md-select

[jelbourn]

Blocked on both #113 and #84

[bhardwaj2607]

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

[JesusSD]

Please make a editable md-select!

[maciejtreder]

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

[henrymana]

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 (https://material.angularjs.org/latest/api/service/$mdPanel). Is the team considering this as a design?

[jelbourn]

@henrymana they are.

[esinek]

@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]

There is the possibility of being implemented some things this plugin JS? http://selectize.github.io/selectize.js/

[fxck]

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

[a5hik]

this is an essential component, looking forward to it.

[clust3rsekt0r]

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.

[mesopotamia]

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]

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

[mesopotamia]

@kkotak

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]

Design doc: md-select

[esinek]

@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?

[kara]

@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.

[nicksteenstra]

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

[bnatter]

@yosefdishinger, @kara : Thanks for the help.

[hegde5]

@ManishJainGitHubUser Thanks a lot for the syntax!

[uncol]

Hi,

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]

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

[narkissbv]

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.

[rafaellyra]

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

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

[narkissbv]

@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]

@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]

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]

After putting select under input inside the card-content there some positioning issues (see screen).

[vivian7169]

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

[joejordanbrown]

@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>
</md-select>

[ajoron]

Hello,
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">{{poi.name}}
</md-select>

Thanks!

[biiit]

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

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

@NgModule({
  imports: [MaterialModule.forRoot(), FormsModule]
})

[vivian7169]

Thank you for reply. Already solved the issue. ;-) Regards, Vivian

…

On Fri, Jan 6, 2017 at 6:47 PM, Beat Meier ***@***.***> wrote: @alan345 <https://github.com/alan345> Make sure do import @angular/forms in your module. import {MaterialModule} from ***@***.***/material";import {FormsModule} from ***@***.***/forms'; @NgModule({ imports: [MaterialModule.forRoot(), FormsModule] }) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#118 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFLILttvkPf9WSF_3TyvlHzZBDRvOa00ks5rPhvfgaJpZM4HkX8O> .

[phmello]

I think I got a scenario

this.createForm = formBuilder.group({
      fieldName: ['']
 });

and them

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

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

[zerouno62]

I'm using @angular/[email protected] 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: https://material.angular.io/guide/theming. 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';

[csyperski]

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....

https://embed.plnkr.co/p7Fm9lC4TxoVaZ8ydYf0/

[kriswinbush]

@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

[clembu]

@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]

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]

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?

[BhattaRj]

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

[zerouno62]

@BhattaRj
If you set the initial value in the model ([(ngModel)]="...") the corresponding option will be selected.

[brunoAltinet]

Hello, I have the same problem as @BhattaRj. if I do this:

<select placeholder="Partner" [(ngModel)]="model.partnerGuid"><option *ngFor="let partner of partners" [value]="partner.guid">{{ partner.name }}</option></select>

The value gets preselected according to the binding. If i change it to

<md-select placeholder="Partner" [(ngModel)]="model.partnerGuid">
  <md-option *ngFor="let partner of partners" [value]="partner.guid">
    {{ partner.name }}
  </md-option>
</md-select>

(literally add md- prefix to tags) the value is NOT preselected. That's also when using API for filling options, angualr/material 2.0.0.-beta.1, angular 2.4.3

[jelbourn]

I'm closing this thread since it's gone somewhat off-topic. If you encounter issues with md-select please file an issue following the issue template. For questions / help, try gitter and Stack Overflow.