angular/adev/shared-docs/components/select/select.component.html

<div ngCombobox #combobox="ngCombobox" class="docs-combobox-container" [(expanded)]="popupExpanded">
  <div #origin class="docs-select-input-container">
    <input
      [attr.id]="id()"
      [attr.name]="name()"
      [value]="displayValue()"
      placeholder="Select an option"
      readonly
      [tabindex]="-1"
    />
    <span class="material-symbols-outlined docs-select-arrow" translate="no" aria-hidden="true"
      >arrow_drop_down</span
    >
  </div>

  <ng-template
    [cdkConnectedOverlay]="{origin: combobox.element, usePopover: 'inline', matchWidth: true}"
    [cdkConnectedOverlayOpen]="popupExpanded()"
    [cdkConnectedOverlayDisableClose]="false"
    (overlayOutsideClick)="popupExpanded.set(false)"
  >
    <ng-template ngComboboxPopup [combobox]="combobox" popupType="dialog">
      <div class="docs-select-popover">
        <div class="docs-select-dialog" ngComboboxWidget>
          <div class="example-combobox-container">
            <div class="docs-select-search-container">
              <span
                class="material-symbols-outlined docs-select-search-icon"
                translate="no"
                aria-hidden="true"
                >search</span
              >
              <input
                ngCombobox
                #innerCombobox="ngCombobox"
                #searchInput
                class="docs-select-search-input"
                placeholder="Search..."
                [(value)]="searchString"
                [alwaysExpanded]="true"
                (keydown.escape)="onSearchEscape($event)"
              />
            </div>

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

            <ng-template ngComboboxPopup [combobox]="innerCombobox">
              <div class="example-popup example-popup-no-margin">
                @if (filteredOptions().length === 0) {
                  <div class="docs-select-no-results">No results found</div>
                }
                <div
                  #listbox="ngListbox"
                  ngListbox
                  [(value)]="selectedValues"
                  [multi]="false"
                  ngComboboxWidget
                  class="example-listbox"
                  focusMode="activedescendant"
                  tabindex="-1"
                  selectionMode="explicit"
                  (click)="onCommit()"
                  (keydown.enter)="onCommit()"
                  [activeDescendant]="listbox.activeDescendant()"
                  [class.example-empty]="filteredOptions().length === 0"
                >
                  @for (option of filteredOptions(); track option.value) {
                    <div
                      ngOption
                      [value]="option.value"
                      [label]="option.label"
                      class="docs-select-option"
                    >
                      <span class="docs-select-option-label">{{ option.label }}</span>
                      <span
                        class="material-symbols-outlined docs-select-check-icon"
                        translate="no"
                        aria-hidden="true"
                        >check</span
                      >
                    </div>
                  }
                </div>
              </div>
            </ng-template>
          </div>
        </div>
      </div>
    </ng-template>
  </ng-template>
</div>