autocomplete-auto-select-example.html

<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"
    />
    <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]="true">
    <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>