ipsos-components/src/demo-app/select/select-demo.html

Material Design components for Angular

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-form-field [floatLabel]="floatLabel" [color]="drinksTheme">
      <mat-select placeholder="Drink" [(ngModel)]="currentDrink" [required]="drinksRequired"
        [disabled]="drinksDisabled" #drinkControl="ngModel">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
          {{ 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.control?.status }} </p>
    <p>
      <label for="floating-placeholder">Floating placeholder:</label>
      <select [(ngModel)]="floatLabel" id="floating-placeholder">
        <option value="auto">Auto</option>
        <option value="always">Always</option>
        <option value="never">Never</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)="drinkControl.reset()">RESET</button>
  </mat-card>

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

    <mat-card-content>
      <mat-form-field [color]="pokemonTheme">
        <mat-select multiple placeholder="Pokemon" [(ngModel)]="currentPokemon"
          [required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
          <mat-option *ngFor="let creature of pokemon" [value]="creature.value">
            {{ 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.control?.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)="pokemonControl.reset()">RESET</button>
    </mat-card-content>
  </mat-card>

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

    <mat-form-field>
      <mat-select placeholder="Digimon" [(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=null">RESET</button>
  </mat-card>

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

    <mat-card-content>
      <mat-form-field>
        <mat-select placeholder="Pokemon" [(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-select placeholder="Drink"
                   [(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.control?.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>

  <div *ngIf="showSelect">
    <mat-card>
      <mat-card-subtitle>formControl</mat-card-subtitle>

      <mat-card-content>
        <mat-form-field>
          <mat-select placeholder="Food i would like to eat" [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-select placeholder="Starter Pokemon" (change)="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>
<div style="height: 500px">This div is for testing scrolled selects.</div>