CODEWITHSUNDEEP
angular
dala
dala

Reputation: 35

How do I use the mdc enhanced select in angular?

I am currently trying to implement the "Enhanced Select" example published on: https://material.io/develop/web/components/input-controls/select-menus/. This is the code:

    <div class="mdc-select demo-width-class">
  <input type="hidden" name="enhanced-select">
  <i class="mdc-select__dropdown-icon"></i>
  <div class="mdc-select__selected-text"></div>
  <div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
    <ul class="mdc-list">
      <li class="mdc-list-item mdc-list-item--selected" data-value="" aria-selected="true"></option>
      <li class="mdc-list-item" data-value="grains">
        Bread, Cereal, Rice, and Pasta
      </li>
      <li class="mdc-list-item" data-value="vegetables">
        Vegetables
      </li>
      <li class="mdc-list-item" data-value="fruit">
        Fruit
      </li>
    </ul>
  </div>
  <span class="mdc-floating-label">Pick a Food Group</label>
  <div class="mdc-line-ripple"></div>
</div>

When I try to do something like:

                <input type="hidden" name="enhanced-select">
                <i class="mdc-select__dropdown-icon"></i>
                <div class="mdc-select__selected-text"></div>
                <div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
                    <ul class="mdc-list" id="listbox1">
                        <li class="mdc-list-item--selected mdc-select__native-control" [attr.data-value]=""></li>
                        <li *ngFor="let option of options" class="mdc-list-item" [attr.data-value]="option.value">
                            {{ option.label }}
                        </li>
                    </ul>
                </div>

Nothing happens when I try to select the options. So I am wondering what am I doing wrong?

My goal is get the functionality similar to the "Filled Enhanced Select" as shown in the image:

enter image description here

Upvotes: 3

Views: 743

Answers (1)

antidote
antidote

Reputation: 127

Are you aware of angular-mdc? It already does what you are trying to accomplish.

Look here for enhanced example: https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/select-demo/examples

You need to use this structure for enhanced version

<mdc-select>
 <mdc-menu>
  <mdc-list>
    <mdc-list-item>...

Upvotes: 1

Related Questions