trimox / angular-mdc-web

Angular wrapper for Material Design (Web) Components
https://trimox.github.io/angular-mdc-web
MIT License
518 stars 87 forks source link

[select] Pre-fill a value in html #2187

Closed KaranKapoorIon closed 4 years ago

KaranKapoorIon commented 4 years ago

Is your feature request related to a problem? Please describe. I'm trying to set a value on mdc-select from within the HTML. I can see that there is (sort of) a provision for it but it doesn't work just yet. I'm trying to do the following...

<mdc-select value="orange" placeholder="Fruit" (selectionChange)="onSelectionChange($event)">
  <mdc-menu [anchorMargin]="{top: 10}">
    <mdc-list>
      <mdc-list-item></mdc-list-item>
      <mdc-list-item value="apple">Apple</mdc-list-item>
      <mdc-list-item value="orange">Orange</mdc-list-item>
      <mdc-list-item value="banana">Banana</mdc-list-item>
      <mdc-list-item disabled value="mango">Mango</mdc-list-item>
    </mdc-list>
  </mdc-menu>
</mdc-select>

I'm passing 'orange' to the select but it throws an error during init because it tries to set the value before the list is even initialized.

Describe the solution you'd like If we can initialize the list before initializing the select, may we can pass in the pre-fill value to the select like the above?

Describe alternatives you've considered Alternative, is to set the pre-fill value in JS, which should work (haven't tried yet) but an HTML approach would be more elegant.

KaranKapoorIon commented 4 years ago

@trimox Any thoughts on this? I'm not sure if there is an HTML workaround for this, so thought I'd create a feature request.

KaranKapoorIon commented 4 years ago

@trimox I just recalled that value is intended to be used like I mentioned.

MdcSelect: value | Sets the selected item by value.

So, I guess this is a bug?

KaranKapoorIon commented 4 years ago

Set selected of list item to achieve the same. Closing the issue.