select-demo.html

Space above cards: <input type="number" [formControl]="topHeightCtrl">
<button matButton (click)="showSelect=!showSelect">SHOW SELECT</button>
<div [style.height.px]="topHeightCtrl.value"></div>

<div class="demo-select">
  <mat-card>
    <mat-card-subtitle>ngModel</mat-card-subtitle>

    <mat-card-content>
      <mat-form-field [floatLabel]="floatLabel" [color]="drinksTheme"
                      [class.demo-drinks-width-large]="drinksWidth === '400px'">
        <mat-label>Drink</mat-label>
        <mat-select [(ngModel)]="currentDrink" [required]="drinksRequired"
          [disabled]="drinksDisabled" #drinkControl="ngModel">
          <mat-option [disabled]="drinksOptionsDisabled === 'all'">None</mat-option>
          @for (drink of drinks; track drink; let index = $index) {
            <mat-option [value]="drink.value"
              [disabled]="isDrinkOptionDisabled(index)">
              {{ drink.viewValue }}
            </mat-option>
          }
        </mat-select>
        <mat-icon matPrefix class="demo-drink-icon">local_drink</mat-icon>
        <mat-hint>Pick a drink!</mat-hint>
        <mat-error>You must make a selection</mat-error>
      </mat-form-field>
      <p> Value: {{ currentDrink }} </p>
      <p> Touched: {{ drinkControl.touched }} </p>
      <p> Dirty: {{ drinkControl.dirty }} </p>
      <p> Status: {{ drinkControl.status }} </p>
      <p>
        <label for="floating-label">Floating label:</label>
        <select [(ngModel)]="floatLabel" id="floating-label">
          <option value="auto">Auto</option>
          <option value="always">Always</option>
          <option value="never">Never</option>
        </select>
      </p>
      <p>
        <label for="drinks-width">Width:</label>
        <select [(ngModel)]="drinksWidth" id="drinks-width">
          <option value="default">Default</option>
          <option value="400px">400px</option>
        </select>
      </p>
      <p>
        <label for="drinks-theme">Theme:</label>
        <select [(ngModel)]="drinksTheme" id="drinks-theme">
          @for (theme of availableThemes; track theme) {
            <option [value]="theme.value">{{theme.name}}</option>
          }
        </select>
      </p>
      <p>
        <label for="drinks-disabled-options">Disabled options:</label>
        <select [(ngModel)]="drinksOptionsDisabled" id="drinks-disabled-options">
          <option value="none">None</option>
          <option value="first-middle-last">Disable First, Middle, and Last Options</option>
          <option value="all">Disable All Options</option>
        </select>
      </p>

      <button matButton (click)="currentDrink='water-2'">SET VALUE</button>
      <button matButton (click)="drinksRequired=!drinksRequired">TOGGLE REQUIRED</button>
      <button matButton (click)="drinksDisabled=!drinksDisabled">TOGGLE DISABLED</button>
      <button matButton (click)="drinkControl.reset()">RESET</button>
    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-card-subtitle>Multiple selection</mat-card-subtitle>

    <mat-card-content>
      <mat-form-field [color]="pokemonTheme">
        <mat-label>Pokemon</mat-label>
        <mat-select multiple [(ngModel)]="currentPokemon"
          [required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
          @for (creature of pokemon; track creature) {
            <mat-option [value]="creature.value" [disabled]="pokemonOptionsDisabled">
              {{ creature.viewValue }}
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
      <p> Value: {{ currentPokemon }} </p>
      <p> Touched: {{ pokemonControl.touched }} </p>
      <p> Dirty: {{ pokemonControl.dirty }} </p>
      <p> Status: {{ pokemonControl.status }} </p>
      <p>
        <label for="pokemon-theme">Theme:</label>
        <select [(ngModel)]="pokemonTheme" id="pokemon-theme">
          @for (theme of availableThemes; track theme) {
            <option [value]="theme.value">{{ theme.name }}</option>
          }
        </select>
      </p>
      <button matButton (click)="setPokemonValue()">SET VALUE</button>
      <button matButton (click)="pokemonRequired=!pokemonRequired">TOGGLE REQUIRED</button>
      <button matButton (click)="pokemonDisabled=!pokemonDisabled">TOGGLE DISABLED</button>
      <button matButton (click)="pokemonOptionsDisabled=!pokemonOptionsDisabled">TOGGLE DISABLED OPTIONS</button>
      <button matButton (click)="pokemonControl.reset()">RESET</button>
    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-card-subtitle>Without Angular forms</mat-card-subtitle>

    <mat-card-content>
      <mat-form-field>
        <mat-label>Digimon</mat-label>
        <mat-select [(value)]="currentDigimon">
          <mat-option>None</mat-option>
          @for (creature of digimon; track creature) {
            <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
          }
        </mat-select>
      </mat-form-field>

      <p>Value: {{ currentDigimon }}</p>

      <button matButton (click)="currentDigimon='pajiramon-3'">SET VALUE</button>
      <button matButton (click)="currentDigimon=''">RESET</button>
    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-card-subtitle>Option groups</mat-card-subtitle>

    <mat-card-content>
      <mat-form-field>
        <mat-label>Pokemon</mat-label>
        <mat-select [(ngModel)]="currentPokemonFromGroup">
          @for (group of pokemonGroups; track group) {
            <mat-optgroup [label]="group.name" [disabled]="group.disabled">
              @for (creature of group.pokemon; track creature) {
                <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
              }
            </mat-optgroup>
          }
        </mat-select>
      </mat-form-field>
    </mat-card-content>
  </mat-card>


  <mat-card>
    <mat-card-subtitle>compareWith</mat-card-subtitle>
    <mat-card-content>
      <mat-form-field [color]="drinksTheme">
        <mat-label>Drink</mat-label>
        <mat-select [(ngModel)]="currentDrinkObject"
                    [required]="drinkObjectRequired"
                    [compareWith]="compareByValue ? compareDrinkObjectsByValue : compareByReference"
                    #drinkObjectControl="ngModel">
          @for (drink of drinks; track drink) {
            <mat-option [value]="drink" [disabled]="drink.disabled">{{ drink.viewValue }}</mat-option>
          }
        </mat-select>
      </mat-form-field>
      <p> Value: {{ currentDrinkObject | json }} </p>
      <p> Touched: {{ drinkObjectControl.touched }} </p>
      <p> Dirty: {{ drinkObjectControl.dirty }} </p>
      <p> Status: {{ drinkObjectControl.status }} </p>
      <p> Comparison Mode: {{ compareByValue ? 'VALUE' : 'REFERENCE' }} </p>

      <button matButton (click)="reassignDrinkByCopy()"
              matTooltip="This action should clear the display value when comparing by reference.">
        REASSIGN DRINK BY COPY
      </button>
      <button matButton (click)="drinkObjectRequired=!drinkObjectRequired">TOGGLE REQUIRED</button>
      <button matButton (click)="compareByValue=!compareByValue">TOGGLE COMPARE BY VALUE</button>
      <button matButton (click)="drinkObjectControl.reset()">RESET</button>
    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-card-subtitle>Appearance comparison</mat-card-subtitle>
    <mat-card-content>
      <p>
        <mat-form-field appearance="fill">
          <mat-label>Fill</mat-label>
          <mat-select [(value)]="currentAppearanceValue">
            <mat-option>None</mat-option>
            @for (creature of digimon; track creature) {
              <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
            }
          </mat-select>
        </mat-form-field>
      </p>

      <p>
        <mat-form-field appearance="outline">
          <mat-label>Outline</mat-label>
          <mat-select [(value)]="currentAppearanceValue">
            <mat-option>None</mat-option>
            @for (creature of digimon; track creature) {
              <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
            }
          </mat-select>
        </mat-form-field>
      </p>

      <button matButton (click)="toggleSelected()">TOGGLE SELECTED</button>
    </mat-card-content>
  </mat-card>

  @if (showSelect) {
    <div>
      <mat-card>
        <mat-card-subtitle>formControl</mat-card-subtitle>

        <mat-card-content>
          <mat-form-field>
            <mat-label>Food I would like to eat</mat-label>
            <mat-select [formControl]="foodControl">
              @for (food of foods; track food) {
                <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
          <p> Value: {{ foodControl.value }} </p>
          <p> Touched: {{ foodControl.touched }} </p>
          <p> Dirty: {{ foodControl.dirty }} </p>
          <p> Status: {{ foodControl.status }} </p>
          <button matButton (click)="foodControl.setValue('pizza-1')">SET VALUE</button>
          <button matButton (click)="toggleDisabled()">TOGGLE DISABLED</button>
          <button matButton (click)="foodControl.reset()">RESET</button>
        </mat-card-content>
      </mat-card>
    </div>
   }

  @if (showSelect) {
  <div>
      <mat-card>
        <mat-card-subtitle>Change event</mat-card-subtitle>

        <mat-card-content>
          <mat-form-field>
            <mat-label>Starter pokemon</mat-label>
            <mat-select (selectionChange)="latestChangeEvent = $event">
              @for (creature of pokemon; track creature) {
                <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
              }
            </mat-select>
          </mat-form-field>

          <p> Change event value: {{ latestChangeEvent?.value }} </p>
        </mat-card-content>
      </mat-card>
    </div>
  }
</div>

<mat-card class="demo-card demo-basic">
  <mat-card-content>
    <form>
      <h4>Basic</h4>
      <mat-form-field class="demo-full-width">
        <mat-label>Select your car</mat-label>
        <select matNativeControl id="mySelectId">
          <option value="" disabled selected></option>
          <option value="volvo">Volvo</option>
          <option value="saab" disabled>Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
      </mat-form-field>
      <h4>Disabled and required</h4>
      <mat-form-field class="demo-full-width">
        <mat-label>Select your car (disabled)</mat-label>
        <select matNativeControl disabled required>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
      </mat-form-field>
      <h4>Floating label</h4>
      <mat-form-field>
        <mat-label>Float with value</mat-label>
        <select matNativeControl>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
      </mat-form-field>
      <mat-form-field>
        <mat-label>Not float when empty</mat-label>
        <select matNativeControl>
          <option value="" selected></option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
      </mat-form-field>
      <mat-form-field>
        <mat-label>Float with no value, but with label</mat-label>
        <select matNativeControl>
          <option value="" selected label="--select one--"></option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
      </mat-form-field>
      <mat-form-field>
        <mat-label>Float with no value, but with html</mat-label>
        <select matNativeControl>
          <option value="" selected>--select one--</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
      </mat-form-field>
      <h4>Looks</h4>
      <mat-form-field appearance="fill">
        <mat-label>Fill</mat-label>
        <select matNativeControl required>
          <option value="" selected></option>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Outline</mat-label>
        <select matNativeControl>
          <option value="" selected></option>
          <option value="volvo">volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
      </mat-form-field>
      <h4>Option group</h4>
      <mat-form-field>
        <select matNativeControl>
          <optgroup label="Swedish Cars">
            <option value="volvo">volvo</option>
            <option value="saab">Saab</option>
          </optgroup>
          <optgroup label="German Cars">
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
          </optgroup>
        </select>
      </mat-form-field>
      <h4>Error message, hint, form sumbit</h4>
      <mat-form-field class="demo-full-width">
        <mat-label>Select your car (required)</mat-label>
        <select matNativeControl required [formControl]="selectFormControl">
          <option label="--select something --"></option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
        @if (selectFormControl.hasError('required')) {
          <mat-error>This field is required</mat-error>
        }
        <mat-hint>You can pick up your favorite car here</mat-hint>
      </mat-form-field>

      <h4>Error message with errorStateMatcher</h4>
      <mat-form-field class="demo-full-width">
        <mat-label>Select your car</mat-label>
        <select matNativeControl required [formControl]="selectFormControl" [errorStateMatcher]="matcher">
          <option label="--select something --"></option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
        @if (selectFormControl.hasError('required')) {
          <mat-error>This field is required</mat-error>
        }
        <mat-hint>You can pick up your favorite car here</mat-hint>
      </mat-form-field>
      <button color="primary" matButton="elevated">Submit</button>
    </form>
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-narrow">
  <mat-card-subtitle>Narrow</mat-card-subtitle>
  <mat-card-content>
    <p class="demo-narrow-sandwich">
      <mat-form-field>
        <mat-label>Bread</mat-label>
        <mat-select [(ngModel)]="sandwichBread"
          [hideSingleSelectionIndicator]="sandwichHideSingleSelectionIndicator">
          @for (bread of breads; track bread) {
            <mat-option [value]="bread.value">{{ bread.viewValue }}</mat-option>
          }
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <mat-label>Meat</mat-label>
        <mat-select [(ngModel)]="sandwichMeat"
          [hideSingleSelectionIndicator]="sandwichHideSingleSelectionIndicator">
          @for (meat of meats; track meat) {
            <mat-option [value]="meat.value">{{ meat.viewValue }}</mat-option>
          }
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <mat-label>Cheese</mat-label>
        <mat-select [(ngModel)]="sandwichCheese"
          [hideSingleSelectionIndicator]="sandwichHideSingleSelectionIndicator">
          @for (cheese of cheeses; track cheese) {
            <mat-option [value]="cheese.value">{{ cheese.viewValue }}</mat-option>
          }
        </mat-select>
      </mat-form-field>
    </p>
    <mat-checkbox [(ngModel)]="sandwichHideSingleSelectionIndicator">
      Hide Single-Selection Indicator
    </mat-checkbox>
  </mat-card-content>
</mat-card>