@if (emojiFlagOfSelectedCurrency) {
  <span class="flex-shrink-0 mr-1">{{ emojiFlagOfSelectedCurrency }}</span>
}

<input
  autocapitalize="off"
  autocomplete="off"
  matInput
  [formControl]="control"
  [matAutocomplete]="currencyAutocomplete"
  [matAutocompleteConnectedTo]="autocompleteOrigin"
/>

<mat-autocomplete
  #currencyAutocomplete="matAutocomplete"
  (closed)="onPanelClosed()"
  (optionSelected)="onUpdateCurrency($event)"
>
  @for (currency of filteredCurrencies; track currency) {
    <mat-option class="line-height-1" [value]="currency">
      <span class="align-items-center d-flex">
        <span class="mr-1">{{ getEmojiFlagFromCurrency(currency) }}</span>
        <span>{{ currency }}</span>
      </span>
    </mat-option>
  }
</mat-autocomplete>