examples.html

<div class="demo-content">
  <h3 class="demo-content__headline">Select</h3>
  <div class="demo-layout__row">
    <button mdc-button
      (click)="standardSelect.outlined = !standardSelect.outlined">Outlined:
      {{standardSelect.outlined ? 'On' : 'Off'}}</button>
    <button mdc-button
      (click)="standardSelect.required = !standardSelect.required">Required:
      {{standardSelect.required ? 'On' : 'Off'}}</button>
    <button mdc-button
      (click)="standardSelect.disabled = !standardSelect.disabled">Disabled:
      {{standardSelect.disabled ? 'On' : 'Off'}}</button>
    <button mdc-button
      (click)="simpleMenu.fullwidth = !simpleMenu.fullwidth">Menu Fullwidth:
      {{simpleMenu.fullwidth ? 'On' : 'Off'}}</button>
    <button mdc-button
      (click)="standardSelect.setSelectionByValue('banana')">Select
      Banana</button>
    <button mdc-button (click)="standardSelect.setSelectedIndex(2)">Set Index
      (2)</button>
    <button mdc-button (click)="standardSelect.setSelectedIndex(-1)">Set Index
      (-1)</button>
    <button mdc-button (click)="standardSelect.focus()">Focus</button>
  </div>
  <mdc-select #standardSelect placeholder="Fruit" name="my-select" required
    helper="Helper text" helperPersistent validationMessage="Field is required"
    (selectionChange)="onSelectionChange($event)">
    <mdc-menu #simpleMenu fullwidth>
      <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>
  <p> Value: {{ standardSelect.value }}</p>
  <p> Index: {{ standardSelect.getSelectedIndex() }}</p>
  <example-viewer [example]="exampleStandard"></example-viewer>
</div>

<div class="demo-content">
  <h3 class="demo-content__headline">No label</h3>
  <mdc-select>
    <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 value="mango">Mango</mdc-list-item>
      </mdc-list>
    </mdc-menu>
  </mdc-select>
  <example-viewer [example]="exampleNoLabel"></example-viewer>
</div>

<div class="demo-content">
  <h3 class="demo-content__headline">Leading Icon</h3>
  <div class="demo-layout__row">
    <button mdc-button (click)="meal.outlined = !meal.outlined">Outlined:
      {{meal.outlined ? 'On' : 'Off'}}</button>
    <button mdc-button (click)="meal.required = !meal.required">Required:
      {{meal.required ? 'On' : 'Off'}}</button>
    <button mdc-button (click)="meal.disabled = !meal.disabled">Disabled:
      {{meal.disabled ? 'On' : 'Off'}}</button>
    <button mdc-button (click)="meal.setSelectedIndex(2)">Set Index (2)</button>
  </div>
  <mdc-select #meal required validationMessage="Meal selection is required"
    placeholder="Pick a Meal">
    <mdc-icon mdcSelectIcon>fastfood</mdc-icon>
    <mdc-menu>
      <mdc-list>
        <mdc-list-item *ngFor="let food of foods" [value]="food.value"
          [disabled]="food.disabled">
          {{food.viewValue}}
        </mdc-list-item>
      </mdc-list>
    </mdc-menu>
  </mdc-select>
  <example-viewer [example]="exampleLeadingIcon"></example-viewer>
</div>

<div class="demo-content">
  <h3 class="demo-content__headline">Custom Enhanced</h3>
  <div class="demo-layout__row">
    <div class="demo-container">
      <mdc-select placeholder="Standard" class="custom-select-shape-radius">
        <mdc-menu>
          <mdc-list>
            <mdc-list-item *ngFor="let food of foods" [value]="food.value"
              [disabled]="food.disabled">
              {{food.viewValue}}
            </mdc-list-item>
          </mdc-list>
        </mdc-menu>
      </mdc-select>
    </div>
    <div class="demo-container">
      <mdc-select placeholder="Standard" outlined
        class="custom-select-outline-shape-radius">
        <mdc-menu>
          <mdc-list>
            <mdc-list-item *ngFor="let food of foods" [value]="food.value"
              [disabled]="food.disabled">
              {{food.viewValue}}
            </mdc-list-item>
          </mdc-list>
        </mdc-menu>
      </mdc-select>
    </div>
    <div class="demo-container">
      <mdc-select placeholder="Standard" outlined
        class="custom-select-outline-color">
        <mdc-menu>
          <mdc-list>
            <mdc-list-item *ngFor="let food of foods" [value]="food.value"
              [disabled]="food.disabled">
              {{food.viewValue}}
            </mdc-list-item>
          </mdc-list>
        </mdc-menu>
      </mdc-select>
    </div>
  </div>
  <example-viewer [example]="exampleCustomEnhanced"></example-viewer>
</div>

<div class="demo-content">
  <h3 class="demo-content__headline">Lazy Load</h3>
  <form [formGroup]="lazyLoadForm" #formDirectiveLazy="ngForm">
    <mdc-select outlined formControlName="lazySelect"
      validationMessage="Selection is required" placeholder="Example">
      <mdc-menu>
        <mdc-list>
          <mdc-list-item *ngFor="let food of lazyFoods" [value]="food.value"
            [disabled]="food.disabled">{{food.viewValue}}</mdc-list-item>
        </mdc-list>
      </mdc-menu>
    </mdc-select>

    <div class="demo-layout__row">
      <button mdc-button (click)="loadFoods()">Load</button>
      <button mdc-button type="button"
        (click)="resetLazyLoaded(formDirectiveLazy)">Reset</button>
    </div>
  </form>
  <example-viewer [example]="exampleLazyLoaded"></example-viewer>
</div>

<div class="demo-content">
  <h3 class="demo-content__headline">Select with [compareWith]</h3>
  <form [formGroup]="formCompareWith">
    <mdc-select formControlName="fruit" [compareWith]="compareFn">
      <mdc-menu>
        <mdc-list>
          <mdc-list-item *ngFor="let fruit of fruits" [value]="fruit">
            {{fruit.name}}</mdc-list-item>
        </mdc-list>
      </mdc-menu>
    </mdc-select>
  </form>
  <p> Value: {{ formCompareWith.value | json}} </p>
  <example-viewer [example]="exampleCompareWith"></example-viewer>
</div>

<div class="demo-content">
  <h3 class="demo-content__headline">Select with ngModel</h3>
  <div class="demo-layout__row">
    <button mdc-button (click)="select.outlined = !select.outlined">Outlined:
      {{select.outlined ? 'On' : 'Off'}}</button>
    <button mdc-button (click)="select.disabled = !select.disabled">Disabled:
      {{select.disabled ? 'On' : 'Off'}}</button>
    <button mdc-button (click)="demoNgModel.reset()">Clear Selection</button>
    <button mdc-button (click)="select.setSelectionByValue('fruit-3')">Select
      Fruit</button>
    <button mdc-button (click)="select.setSelectedIndex(2)">Select index
      2</button>
  </div>
  <form #demoForm="ngForm">
    <mdc-select #select placeholder="Favorite food" name="food" required
      outlined ngModel #demoNgModel="ngModel"
      (selectionChange)="onSelectionChange($event)">
      <mdc-menu>
        <mdc-list>
          <mdc-list-item *ngFor="let food of foods" [value]="food.value"
            [disabled]="food.disabled">{{food.viewValue}}</mdc-list-item>
        </mdc-list>
      </mdc-menu>
    </mdc-select>
  </form>
  <p>Value: {{ demoNgModel.value }}</p>
  <p>Index: {{ select.getSelectedIndex() }}</p>
  <p>Touched: {{ demoForm.touched }}</p>
  <p>Dirty: {{ demoForm.dirty }}</p>
  <example-viewer [example]="exampleNgModel"></example-viewer>
</div>

<div class="demo-content">
  <h3 class="demo-content__headline">Select with FormControl</h3>
  <div class="demo-layout__row">
    <button mdc-button
      (click)="favoriteFood.outlined = !favoriteFood.outlined">Outlined:
      {{favoriteFood.outlined ?
      'On' : 'Off'}}</button>
    <button mdc-button
      (click)="favoriteFood.disabled = !favoriteFood.disabled">Disabled:
      {{favoriteFood.disabled ?
      'On' : 'Off'}}</button>
    <button mdc-button
      (click)="favoriteFood.setSelectionByValue('pizza-1')">Select
      Pizza</button>
    <button mdc-button
      (click)="foodForm.controls['favoriteFood'].setValue('pizza-1')">Set
      Form Value</button>
    <button mdc-button (click)="favoriteFood.setSelectedIndex(1)">Set Index
      (1)</button>
  </div>
  <form [formGroup]="foodForm" id="foodForm" (ngSubmit)="submitForm()"
    #formDirective="ngForm">
    <mdc-select #favoriteFood placeholder="Favorite food"
      formControlName="favoriteFood" validationMessage="Selection is required">
      <mdc-menu>
        <mdc-list>
          <mdc-list-item *ngFor="let food of foods" [value]="food.value"
            [disabled]="food.disabled">{{food.viewValue}}</mdc-list-item>
        </mdc-list>
      </mdc-menu>
    </mdc-select>

    <div class="demo-layout__row">
      <button mdc-button>Submit</button>
      <button mdc-button type="button"
        (click)="resetForm(formDirective)">Reset</button>
    </div>
  </form>
  <p>Control Valid: {{foodForm.controls['favoriteFood'].valid}}</p>
  <p>Dirty: {{ foodForm.dirty }}</p>
  <p>Valid: {{ foodForm.valid }}</p>
  <p>Pristine: {{ foodForm.pristine }}</p>
  <p>Touched: {{ foodForm.touched }}</p>
  <p>Value: {{ foodForm.value | json }}</p>

  <example-viewer [example]="exampleReactive"></example-viewer>
</div>