select-demo.html

Space above cards: <input type="number" [formControl]="topHeightCtrl">
<button mat-button (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">None</mat-option>
          <mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drinksOptionsDisabled">
            {{ 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">
          <option *ngFor="let theme of availableThemes" [value]="theme.value">
            {{theme.name}}
          </option>
        </select>
      </p>

      <button mat-button (click)="currentDrink='water-2'">SET VALUE</button>
      <button mat-button (click)="drinksRequired=!drinksRequired">TOGGLE REQUIRED</button>
      <button mat-button (click)="drinksDisabled=!drinksDisabled">TOGGLE DISABLED</button>
      <button mat-button (click)="drinksOptionsDisabled=!drinksOptionsDisabled">TOGGLE DISABLED OPTIONS</button>
      <button mat-button (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">
          <mat-option *ngFor="let creature of pokemon" [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">
          <option *ngFor="let theme of availableThemes" [value]="theme.value">{{ theme.name }}</option>
        </select>
      </p>
      <button mat-button (click)="setPokemonValue()">SET VALUE</button>
      <button mat-button (click)="pokemonRequired=!pokemonRequired">TOGGLE REQUIRED</button>
      <button mat-button (click)="pokemonDisabled=!pokemonDisabled">TOGGLE DISABLED</button>
      <button mat-button (click)="pokemonOptionsDisabled=!pokemonOptionsDisabled">TOGGLE DISABLED OPTIONS</button>
      <button mat-button (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>
          <mat-option *ngFor="let creature of digimon" [value]="creature.value">
            {{ creature.viewValue }}
          </mat-option>
        </mat-select>
      </mat-form-field>

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

      <button mat-button (click)="currentDigimon='pajiramon-3'">SET VALUE</button>
      <button mat-button (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">
          <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
            [disabled]="group.disabled">
            <mat-option *ngFor="let creature of group.pokemon" [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">
          <mat-option *ngFor="let drink of drinks" [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 mat-button (click)="reassignDrinkByCopy()"
              matTooltip="This action should clear the display value when comparing by reference.">
        REASSIGN DRINK BY COPY
      </button>
      <button mat-button (click)="drinkObjectRequired=!drinkObjectRequired">TOGGLE REQUIRED</button>
      <button mat-button (click)="compareByValue=!compareByValue">TOGGLE COMPARE BY VALUE</button>
      <button mat-button (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>
            <mat-option *ngFor="let creature of digimon" [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>
            <mat-option *ngFor="let creature of digimon" [value]="creature.value">
              {{ creature.viewValue }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </p>

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

  <div *ngIf="showSelect">
    <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">
            <mat-option *ngFor="let food of foods" [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 mat-button (click)="foodControl.setValue('pizza-1')">SET VALUE</button>
        <button mat-button (click)="toggleDisabled()">TOGGLE DISABLED</button>
        <button mat-button (click)="foodControl.reset()">RESET</button>
      </mat-card-content>
    </mat-card>
  </div>

  <div *ngIf="showSelect">
    <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">
            <mat-option *ngFor="let creature of pokemon" [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>
        <mat-error *ngIf="selectFormControl.hasError('required')">
          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>
        <mat-error *ngIf="selectFormControl.hasError('required')">
          This field is required
        </mat-error>
        <mat-hint>You can pick up your favorite car here</mat-hint>
      </mat-form-field>
      <button color="primary" mat-raised-button>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">
          <mat-option *ngFor="let bread of breads" [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">
          <mat-option *ngFor="let meat of meats" [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">
          <mat-option *ngFor="let cheese of cheeses" [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>