src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.html - main - githubmirror/components

src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.html

46 строк2 KB

tjshiu

feat(aria/combobox): migrate simple-combobox directly into primary entrypoints (#33206)

06 май 2026, 18:50

06 май 2026, 18:500ca47b4

<div class="example-combobox-container">
  <div #origin class="example-autocomplete">
    <span class="example-search-icon material-symbols-outlined" translate="no">search</span>
    <input
      ngCombobox
      #combobox="ngCombobox"
      aria-label="Label dropdown"
      placeholder="Select a country"
      [(value)]="searchString"
      [(expanded)]="popupExpanded"
      (click)="popupExpanded.set(true)"
    />
    <button
      class="example-clear-button"
      aria-label="Clear"
      (keydown)="onKeydown($event)"
      (click)="clear()"
    >
      <span aria-hidden="true" class="example-clear-icon material-symbols-outlined">close</span>
    </button>
  </div>

  <div aria-live="polite" class="cdk-visually-hidden">
    {{countries().length === 0 ? 'No results found for ' + query() : ''}}
  </div>

  <ng-template [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}" [cdkConnectedOverlayOpen]="popupExpanded()">
    <ng-template ngComboboxPopup [combobox]="combobox">
      <div class="example-popup">
        @if (countries().length === 0) {
          <div class="example-no-results">No results found</div>
        }

        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabindex]="-1" [(value)]="selectedOption"
          (click)="onCommit()" (keydown.enter)="onCommit()">
          @for (country of countries(); track country) {
            <div ngOption [value]="country" [label]="country" [disabled]="country === 'Brazil'">
              <span class="example-option-label">{{country}}</span>
              <span class="example-check-icon material-symbols-outlined" translate="no">check</span>
            </div>
          }
        </div>
      </div>
    </ng-template>
  </ng-template>
</div>