autocomplete-demo.html

Space above cards: <input type="number" [formControl]="topHeightCtrl">
<div [style.height.px]="topHeightCtrl.value"></div>
<div class="demo-autocomplete">
  <mat-card>
    Reactive length: {{ reactiveStates.length }}
    <div class="demo-truncate-text">Reactive value: {{ stateCtrl.value | json }}</div>
    <div>Reactive dirty: {{ stateCtrl.dirty }}</div>

    <mat-form-field [color]="reactiveStatesTheme">
      <mat-label>State</mat-label>
      <input
        #reactiveInput
        matInput
        [matAutocomplete]="reactiveAuto"
        [formControl]="stateCtrl"
        (input)="reactiveStates = filterStates(reactiveInput.value)"
        (focus)="reactiveStates = filterStates(reactiveInput.value)">
    </mat-form-field>
    <mat-autocomplete #reactiveAuto="matAutocomplete"
      [displayWith]="displayFn"
      [hideSingleSelectionIndicator]="reactiveHideSingleSelectionIndicator"
      [autoActiveFirstOption]="reactiveAutoActiveFirstOption"
      [requireSelection]="reactiveRequireSelection"
      [revertToValue]="reactiveRevertToValue">
      @for (state of reactiveStates; track state; let index = $index) {
        <mat-option [value]="state" [disabled]="reactiveIsStateDisabled(state.index)">
          <span>{{ state.name }}</span>
          <span class="demo-secondary-text"> ({{ state.code }}) </span>
        </mat-option>
      }
    </mat-autocomplete>

    <p>
      <button matButton (click)="stateCtrl.reset()">RESET</button>
      <button matButton (click)="stateCtrl.setValue(states[10])">SET VALUE</button>
      <button matButton (click)="stateCtrl.enabled ? stateCtrl.disable() : stateCtrl.enable()">
        TOGGLE DISABLED
      </button>
    </p>
    <p>
      <label for="reactive-disable-state-options">Disable States</label>
      <select [(ngModel)]="reactiveDisableStateOption" id="reactive-disable-state-options">
        <option value="none">None</option>
        <option value="first-middle-last">Disable First, Middle and Last States</option>
        <option value="all">Disable All States</option>
      </select>
    </p>
    <p>
      <mat-checkbox [(ngModel)]="reactiveHideSingleSelectionIndicator">
        Hide Single-Selection Indicator
      </mat-checkbox>
    </p>
    <p>
      <mat-checkbox [(ngModel)]="reactiveAutoActiveFirstOption">
        Automatically activate first option
      </mat-checkbox>
    </p>
    <p>
      <mat-checkbox [(ngModel)]="reactiveRequireSelection">
        Require Selection
      </mat-checkbox>
    </p>
    <p>
      <mat-form-field>
        <mat-label>Revert value to</mat-label>
        <mat-select [(ngModel)]="reactiveRevertToValue" [disabled]="!reactiveRequireSelection">
          <mat-option [value]="null">None</mat-option>
            @for (state of states; track state) {
            <mat-option [value]="state">
              <span>{{ state.name }}</span>
              <span class="demo-secondary-text"> ({{ state.code }}) </span>
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
    </p>

  </mat-card>

  <mat-card>

    <div>Template-driven value (currentState): {{ currentState }}</div>
    <div>Template-driven dirty: {{ modelDir ? modelDir.dirty : false }}</div>

    <!-- Added an @if below to test that autocomplete works with @if -->
    @if (true) {
      <mat-form-field [color]="templateStatesTheme">
        <mat-label>State</mat-label>
        <input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
          (ngModelChange)="tdStates = filterStates(currentState)" [disabled]="tdDisabled">
        <mat-autocomplete #tdAuto="matAutocomplete"
          [hideSingleSelectionIndicator]="templateHideSingleSelectionIndicator"
          [autoActiveFirstOption]="templateAutoActiveFirstOption"
          [requireSelection]="templateRequireSelection"
          [revertToValue]="templateRevertToValue">
          @for (state of tdStates; track state) {
            <mat-option [value]="state.name"
              [disabled]="templateIsStateDisabled(state.index)">
              <span>{{ state.name }}</span>
            </mat-option>
          }
        </mat-autocomplete>
      </mat-form-field>
    }

    <p>
      <button matButton (click)="clearTemplateState()">RESET</button>
      <button matButton (click)="currentState='California'">SET VALUE</button>
      <button matButton (click)="tdDisabled=!tdDisabled">
        TOGGLE DISABLED
      </button>
      <select [(ngModel)]="templateStatesTheme">
        @for (theme of availableThemes; track theme) {
          <option [value]="theme.value">{{theme.name}}</option>
        }
      </select>
    </p>
    <p>
      <mat-checkbox [(ngModel)]="templateHideSingleSelectionIndicator">
        Hide Single-Selection Indicator
      </mat-checkbox>
    <p>
      <mat-checkbox [(ngModel)]="templateAutoActiveFirstOption">
        Automatically activate first option
      </mat-checkbox>
    </p>
    <p>
      <mat-checkbox [(ngModel)]="templateRequireSelection">
        Require Selection
      </mat-checkbox>
    </p>
    <p>
      <mat-form-field>
        <mat-label>Revert value to</mat-label>
        <mat-select [(ngModel)]="templateRevertToValue" [disabled]="!templateRequireSelection">
          <mat-option [value]="null">None</mat-option>
            @for (state of states; track state) {
            <mat-option [value]="state.name">
              <span>{{ state.name }}</span>
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
    </p>
    <p>
      <label for="template-disable-state-options">Disable States</label>
      <select [(ngModel)]="templateDisableStateOption" id="template-disable-state-options">
        <option value="none">None</option>
        <option value="first-middle-last">Disable First, Middle and Last States</option>
        <option value="all">Disable All States</option>
      </select>
    </p>

  </mat-card>

  <mat-card>
    <div>Option groups (currentGroupedState): {{ currentGroupedState }}</div>

    <mat-form-field>
      <mat-label>State</mat-label>
      <input
        matInput
        [matAutocomplete]="groupedAuto"
        [(ngModel)]="currentGroupedState"
        (ngModelChange)="filteredGroupedStates = filterStateGroups(currentGroupedState)">
    </mat-form-field>
  </mat-card>

  <mat-card>
    <mat-card-subtitle>Autocomplete inside a Dialog</mat-card-subtitle>
    <mat-card-content>
      <button matButton (click)="openDialog()">Open dialog</button>
    </mat-card-content>
  </mat-card>
</div>

<mat-autocomplete #groupedAuto="matAutocomplete">
  @for (group of filteredGroupedStates; track group) {
    <mat-optgroup [label]="'States starting with ' + group.letter">
      @for (state of group.states; track state) {
        <mat-option [value]="state.name">{{ state.name }}</mat-option>
      }
    </mat-optgroup>
  }
</mat-autocomplete>