src/app/core/entity/entity-field-select/entity-field-select.component.ts

Description

Dropdown field offering all fields of a given entity type (for admin and action screens).

Extends

BasicAutocompleteComponent< FormFieldConfig, string >

Example

Metadata

changeDetection	`ChangeDetectionStrategy.OnPush`
providers	`EntityFieldSelectComponent`
selector	`app-entity-field-select`
standalone	`true`
templateUrl	`../../common-components/basic-autocomplete/basic-autocomplete.component.html`

Relationships

Used by

Depends on

BasicAutocompleteComponent< FormFieldConfig, string >

Index

Inputs

placeholder
Type : `string`
Default value : $localize`:EntityFieldSelect placeholder:Select Record Field`
Inherited from `CustomFormControlDirective`
`CustomFormControlDirective:40`

entityType
Type : `string \| EntityConstructor`
Defined in src/app/core/entity/entity-field-select/entity-field-select.component.ts:58
The entity type whose fields to display.

optionToString
Type : `(option: FormFieldConfig) => string`
Default value : // fall back to the id so the internal `_id` field (which has no label) is not blank (option) => option.label ?? option.id
Inherited from `BasicAutocompleteComponent`
`BasicAutocompleteComponent:43`

showInternalIdField
Type : `boolean`
Default value : `false`
Defined in src/app/core/entity/entity-field-select/entity-field-select.component.ts:55
Whether to show the internal _id field in the dropdown. Useful for import contexts where matching by UUID is needed.

valueMapper
Type : `(option: FormFieldConfig) => string`
Default value : `(option) => option.id`
Inherited from `BasicAutocompleteComponent`
`BasicAutocompleteComponent:47`

createOption
Type : `(input: string) => Promise<O>`
Inherited from `BasicAutocompleteComponent`
`BasicAutocompleteComponent:156`

createOptions
Type : `CreateOptionConfig<O>[]`
Default value : `[]`
Inherited from `BasicAutocompleteComponent`
`BasicAutocompleteComponent:157`

display
Type : `"text" \| "chips" \| "none"`
Default value : `"text"`
Inherited from `BasicAutocompleteComponent`
`BasicAutocompleteComponent:303`
Display the selected items as simple text, as chips or not at all (if used in combination with another component)

displayFullLengthOptionLabel
Type : `boolean`
Default value : `false`
Inherited from `BasicAutocompleteComponent`
`BasicAutocompleteComponent:257`
Whether dropdown option labels should be shown in full length. Set to false to truncate labels with ellipsis.

hideOption
Type : `(option: O) => boolean`
Default value : `() => false`
Inherited from `BasicAutocompleteComponent`
`BasicAutocompleteComponent:158`

maxOptionsToDisplay
Type : `number`
Default value : `100`
Inherited from `BasicAutocompleteComponent`
`BasicAutocompleteComponent:250`
Maximum number of options to display in the dropdown. If more options match the current filter, a hint is shown to type to narrow results. Set to 0 for no limit. Defaults to 100.

multi
Type : `boolean`
Inherited from `BasicAutocompleteComponent`
`BasicAutocompleteComponent:206`
Whether the user should be able to select multiple values.

options
Type : `O[]`
Default value : `[]`
Inherited from `BasicAutocompleteComponent`
`BasicAutocompleteComponent:282`
The options to display in the autocomplete dropdown. If you pass complex objects here, you can customize what value is displayed and what value is output/stored by overriding the `valueMapper` and `optionToString` methods via inputs. By default, the "_id" property is used as the value and the "_label" property or `toString()` method as the display value.

reorder
Type : `boolean`
Inherited from `BasicAutocompleteComponent`
`BasicAutocompleteComponent:211`
Whether the user can manually drag & drop to reorder the selected items

aria-describedby
Type : `string`
Inherited from `CustomFormControlDirective`
`CustomFormControlDirective:98`

disabled
Type : `boolean`
Inherited from `CustomFormControlDirective`
`CustomFormControlDirective:155`

ngControl
Type : `any`
Default value : `inject(NgControl, { optional: true, self: true })`
Inherited from `CustomFormControlDirective`
`CustomFormControlDirective:91`

required
Type : `boolean`
Inherited from `CustomFormControlDirective`
`CustomFormControlDirective:102`

value
Type : `T`
Inherited from `CustomFormControlDirective`
`CustomFormControlDirective:164`

Outputs

autocompleteFilterChange
Type : `(o: O) => boolean`
Inherited from `BasicAutocompleteComponent`
`BasicAutocompleteComponent:234`

valueChange
Type : `EventEmitter`
Inherited from `CustomFormControlDirective`
`CustomFormControlDirective:172`

Methods

compareEnumValues

compareEnumValues(a: any, b: any)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:576

Compare two enum values by id if present, otherwise by reference.

Parameters :

Name	Type	Optional
a	`any`	No
b	`any`	No

Returns : boolean

Async createFromConfig

createFromConfig(marker: CreateOptionMarker<O>)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:650

Parameters :

Name	Type	Optional
marker	`CreateOptionMarker<O>`	No

Returns : any

Protected createOptionAriaLabel

createOptionAriaLabel(option: CreateOptionConfig<O>, input: string)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:193

Parameters :

Name	Type	Optional
option	`CreateOptionConfig<O>`	No
input	`string`	No

Returns : string

Protected createOptionDisplay

createOptionDisplay(input: string)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:167

Used in template to display the "Add new" option label. Delegates to optionToString so callers with a custom optionToString (e.g. showing an example date) get a preview in the "Add new" option too. Falls back to the raw input when optionToString throws or returns null/undefined (e.g. when O is an object type whose properties don't exist on a plain string).

Parameters :

Name	Type	Optional
input	`string`	No

Returns : string

Protected createOptionLabel

createOptionLabel(option: CreateOptionConfig<O>, input: string)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:186

Parameters :

Name	Type	Optional
option	`CreateOptionConfig<O>`	No
input	`string`	No

Returns : string

dropChips

dropChips(event: CdkDragDrop)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:451

Parameters :

Name	Type	Optional
event	`CdkDragDrop<any[]>`	No

Returns : void

Protected isSelected

isSelected(option: SelectableOption<O | V>)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:719

Whether the given option is part of the current selection. Reads the _selectedOptions signal, so that options rendered in the open dropdown are updated as soon as the selection changes.

Parameters :

Name	Type	Optional
option	`SelectableOption<O \| V>`	No

Returns : boolean

onContainerClick

onContainerClick(event: MouseEvent)

Inherited from CustomFormControlDirective

CustomFormControlDirective:792

Parameters :

Name	Type	Optional
event	`MouseEvent`	No

Returns : void

Protected onDropdownClosed

onDropdownClosed()

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:778

The dropdown closed, which ends the selection unless the field still has the focus (e.g. after closing the dropdown with the Escape key).

Returns : void

onFocusOut

onFocusOut(event: FocusEvent)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:760

Parameters :

Name	Type	Optional
event	`FocusEvent`	No

Returns : void

Protected onOptionSelectionChange

onOptionSelectionChange(event: MatOptionSelectionChange)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:729

Apply a selection the user made while the dropdown is kept open for a multi-select field.

Material only emits its own optionSelected output when the panel closes, which is suppressed for multi-select (see KeepPanelOpenOnSelectDirective).

Parameters :

Name	Type	Optional
event	`MatOptionSelectionChange`	No

Returns : void

select

select(selected: string | SelectableOption | CreateOptionMarker)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:600

Parameters :

Name	Type	Optional
selected	`string \| SelectableOption<O \| V> \| CreateOptionMarker<O>`	No

Returns : void

showAutocomplete

showAutocomplete(valueToRevertTo?: string)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:472

Parameters :

Name	Type	Optional
valueToRevertTo	`string`	Yes

Returns : void

Protected toCreateOptionValue

toCreateOptionValue(option: CreateOptionConfig<O>, input: string)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:643

Parameters :

Name	Type	Optional
option	`CreateOptionConfig<O>`	No
input	`string`	No

Returns : CreateOptionMarker<O>

unselect

unselect(option: SelectableOption<O | V>)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:630

Parameters :

Name	Type	Optional
option	`SelectableOption<O \| V>`	No

Returns : void

Public updatePanelWidth

updatePanelWidth()

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:404

Set the width of the dropdown panel programmatically to match the parent form field. (this is not possible with pure CSS)

Note: If the field is close to the viewport edge, Angular Material's overlay system may shift the dropdown horizontally to keep it visible, causing minor misalignment. This is expected and ensures accessibility.

Returns : void

writeValue

writeValue(val: V[] | V, notifyFormControl: unknown)

Inherited from CustomFormControlDirective

CustomFormControlDirective:803

Parameters :

Name	Type	Optional	Default value
val	`V[] \| V`	No
notifyFormControl	`unknown`	No	`false`

Returns : void

blur

blur()

Inherited from CustomFormControlDirective

CustomFormControlDirective:201

Returns : void

focus

focus()

Inherited from CustomFormControlDirective

CustomFormControlDirective:196

Returns : void

registerOnChange

registerOnChange(fn: any)

Inherited from CustomFormControlDirective

CustomFormControlDirective:237

Parameters :

Name	Type	Optional
fn	`any`	No

Returns : void

registerOnTouched

registerOnTouched(fn: any)

Inherited from CustomFormControlDirective

CustomFormControlDirective:241

Parameters :

Name	Type	Optional
fn	`any`	No

Returns : void

setDescribedByIds

setDescribedByIds(ids: string[])

Inherited from CustomFormControlDirective

CustomFormControlDirective:211

Parameters :

Name	Type	Optional
ids	`string[]`	No

Returns : void

setDisabledState

setDisabledState(isDisabled: boolean)

Inherited from CustomFormControlDirective

CustomFormControlDirective:245

Parameters :

Name	Type	Optional
isDisabled	`boolean`	No

Returns : void

Properties

Protected optionsSource

Type : unknown

Default value :

computed(() => {
    const optionsById = new Map<string, FormFieldConfig>();
    for (const option of this.options() ?? []) {
      optionsById.set(option.id, option);
    }
    for (const inferredOption of this.fieldOptions()) {
      if (!optionsById.has(inferredOption.id)) {
        optionsById.set(inferredOption.id, inferredOption);
      }
    }
    return [...optionsById.values()];
  })

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:86

Explicitly given options are merged with the fields inferred from the entity's schema, so that callers can offer additional, calculated columns (e.g. "distance") that do not exist as a field in the schema. An explicit config takes precedence over the inferred field of the same id.

_selectedOptions

Type : unknown

Default value : signal<SelectableOption<O, V>[]>([])

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:293

autocomplete

Type : unknown

Default value : viewChild(MatAutocompleteTrigger)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:146

autocompleteFilterFunction

Type : function

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:233

autocompleteForm

Type : unknown

Default value : new FormControl("")

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:213

autocompleteOptions

Type : Signal<SelectableOption[]>

Default value :

toSignal(
    this.autocompleteSuggestedOptions,
    { initialValue: [] as SelectableOption<O, V>[] },
  )

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:229

autocompleteSuggestedOptions

Type : unknown

Default value :

this.autocompleteForm.valueChanges.pipe(
    filter((val) => typeof val === "string"),
    map((val) => this.updateAutocomplete(val)),
    startWith([] as SelectableOption<O, V>[]),
  )

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:224

Protected availableCreateOptions

Type : unknown

Default value :

computed<CreateOptionConfig<O>[]>(() => {
    if (this.createOptions().length > 0) {
      return this.createOptions();
    }
    if (!this.createOption()) {
      return [];
    }

    return [{ label: "", create: this.createOption() }];
  })

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:175

effectiveDisplay

Type : unknown

Default value :

computed<"text" | "chips" | "none">(() =>
    this.multi() && this.reorder() && this.display() === "text"
      ? "chips"
      : this.display(),
  )

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:308

Derived display mode. Reorderable multi-select uses chips without mutating the public input.

hasMoreOptions

Type : unknown

Default value : signal(false)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:251

inputElement

Type : unknown

Default value :

viewChild("inputElement", { read: MatInput }) as Signal<
    (MatInput & { _elementRef: ElementRef<HTMLElement> }) | undefined
  >

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:143

isInSearchMode

Type : WritableSignal<boolean>

Default value : signal(false)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:318

display the search input rather than the selected elements only (when the form field gets focused).

panelWidth

Type : unknown

Default value : signal("200px")

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:243

Dynamic width of the autocomplete dropdown panel. Set to match the full width of the Material form field container (including icons/padding).

retainSearchValue

Type : string

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:298

Keep the search value to help users quickly multi-select multiple related options without having to type filter text again

showAddOption

Type : unknown

Default value : signal(false)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:237

whether the "add new" option is logically allowed in the current context (e.g. not creating a duplicate)

templateRef

Type : unknown

Default value : contentChild(TemplateRef)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:137

trackByOptionValueFn

Type : TrackByFunction<SelectableOption<O, V>> | undefined

Default value : () => {...}

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:319

viewportHeight

Type : unknown

Default value :

computed(() => {
    const contentHeight = (this.autocompleteOptions()?.length ?? 0) * 48;
    const availableHeight =
      BasicAutocompleteComponent.PANEL_MAX_HEIGHT -
      BasicAutocompleteComponent.FOOTER_RESERVE;
    return Math.min(contentHeight, availableHeight);
  })

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:332

virtualScrollViewport

Type : unknown

Default value : viewChild(CdkVirtualScrollViewport)

Inherited from BasicAutocompleteComponent

BasicAutocompleteComponent:147

controlType

Type : string

Default value : "custom-control"

Inherited from CustomFormControlDirective

CustomFormControlDirective:114

elementRef

Type : unknown

Default value : inject<ElementRef<HTMLElement>>(ElementRef)

Inherited from CustomFormControlDirective

CustomFormControlDirective:87

Readonly enabled

Type : Signal<boolean>

Default value : computed(() => !this._disabled())

Inherited from CustomFormControlDirective

CustomFormControlDirective:80

Whether the control is currently enabled, as a signal (tracks disabled).

errorStateMatcher

Type : unknown

Default value : inject(ErrorStateMatcher)

Inherited from CustomFormControlDirective

CustomFormControlDirective:88

Type : unknown

Default value : `custom-form-control-${CustomFormControlDirective.nextId++}`

Inherited from CustomFormControlDirective

CustomFormControlDirective:96

Static nextId

Type : number

Default value : 0

Inherited from CustomFormControlDirective

CustomFormControlDirective:95

onChange

Type : unknown

Default value : () => {...}

Inherited from CustomFormControlDirective

CustomFormControlDirective:115

onTouched

Type : unknown

Default value : () => {...}

Inherited from CustomFormControlDirective

CustomFormControlDirective:116

parentForm

Type : unknown

Default value : inject(NgForm, { optional: true })

Inherited from CustomFormControlDirective

CustomFormControlDirective:92

parentFormGroup

Type : unknown

Default value : inject(FormGroupDirective, { optional: true })

Inherited from CustomFormControlDirective

CustomFormControlDirective:93

stateChanges

Type : unknown

Default value : new Subject<void>()

Inherited from CustomFormControlDirective

CustomFormControlDirective:113

Readonly valueSignal

Type : Signal<T>

Default value : computed(() => this._value())

Inherited from CustomFormControlDirective

CustomFormControlDirective:77

The current value of the control as a signal. Authoritative in both modes: it reflects the bound FormControl (synced in ngDoCheck) as well as [(value)] / writeValue updates.

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
  input,
  Input,
} from "@angular/core";
import { MatFormFieldControl } from "@angular/material/form-field";
import {
  BASIC_AUTOCOMPLETE_COMPONENT_IMPORTS,
  BasicAutocompleteComponent,
} from "app/core/common-components/basic-autocomplete/basic-autocomplete.component";
import { FormFieldConfig } from "../../common-components/entity-form/FormConfig";
import { EntityRegistry } from "../database-entity.decorator";
import { EntityConstructor } from "../model/entity";
import { EntitySchema } from "../schema/entity-schema";

/**
 * Dropdown field offering all fields of a given entity type
 * (for admin and action screens).
 */
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "app-entity-field-select",
  imports: BASIC_AUTOCOMPLETE_COMPONENT_IMPORTS,
  templateUrl:
    "../../common-components/basic-autocomplete/basic-autocomplete.component.html",
  providers: [
    { provide: MatFormFieldControl, useExisting: EntityFieldSelectComponent },
  ],
})
export class EntityFieldSelectComponent extends BasicAutocompleteComponent<
  FormFieldConfig,
  string
> {
  // `placeholder` is part of the `MatFormFieldControl` contract (Angular Material
  // reads it as a plain property), so it stays a decorator `@Input()` rather than a
  // signal input; here we only override the default value.
  @Input() override placeholder: string =
    $localize`:EntityFieldSelect placeholder:Select Record Field`;

  override optionToString = input<(option: FormFieldConfig) => string>(
    // fall back to the id so the internal `_id` field (which has no label) is not blank
    (option) => option.label ?? option.id,
  );
  override valueMapper = input<(option: FormFieldConfig) => string>(
    (option) => option.id,
  );

  /**
   * Whether to show the internal _id field in the dropdown.
   * Useful for import contexts where matching by UUID is needed.
   */
  showInternalIdField = input(false);

  /** The entity type whose fields to display. */
  entityType = input<string | EntityConstructor>();

  private entityRegistry = inject(EntityRegistry);

  private readonly resolvedEntityType = computed(() => {
    const entity = this.entityType();
    if (!entity) {
      return undefined;
    }
    return typeof entity === "string"
      ? this.entityRegistry.get(entity)
      : entity;
  });

  private readonly fieldOptions = computed(() => {
    const entityType = this.resolvedEntityType();
    if (!entityType) {
      return [];
    }
    return this.getAllFieldProps(entityType.schema);
  });

  /**
   * Explicitly given options are merged with the fields inferred from the entity's schema,
   * so that callers can offer additional, calculated columns (e.g. "distance")
   * that do not exist as a field in the schema.
   * An explicit config takes precedence over the inferred field of the same id.
   */
  protected override optionsSource = computed(() => {
    const optionsById = new Map<string, FormFieldConfig>();
    for (const option of this.options() ?? []) {
      optionsById.set(option.id, option);
    }
    for (const inferredOption of this.fieldOptions()) {
      if (!optionsById.has(inferredOption.id)) {
        optionsById.set(inferredOption.id, inferredOption);
      }
    }
    return [...optionsById.values()];
  });

  private getAllFieldProps(schema: EntitySchema): FormFieldConfig[] {
    return [...schema.entries()]
      .filter(
        ([prop, fieldSchema]) =>
          (!fieldSchema.isInternalField && !!fieldSchema.label) ||
          (this.showInternalIdField() && prop === "_id"),
      )
      .map(([name, fieldSchema]) => ({ ...fieldSchema, id: name }));
  }
}

<div matAutocompleteOrigin #autocompleteOrigin="matAutocompleteOrigin">
  <!--Display-->
  @if (effectiveDisplay() === "text" || effectiveDisplay() === "none") {
    <input
      [id]="id"
      [hidden]="isInSearchMode() || effectiveDisplay() === 'none'"
      [disabled]="!enabled()"
      matInput
      style="text-overflow: ellipsis; width: calc(100% - 50px)"
      (focusin)="showAutocomplete()"
      (focusout)="showAutocomplete()"
      [value]="displayText"
      [placeholder]="placeholder"
    />
  } @else {
    <input
      [hidden]="true"
      [disabled]="!enabled()"
      matInput
      (focusin)="showAutocomplete()"
      (focusout)="showAutocomplete()"
      [matChipInputFor]="chipList"
    />
    <mat-chip-grid
      #chipList
      cdkDropList
      cdkDropListOrientation="mixed"
      [cdkDropListDisabled]="!reorder()"
      (cdkDropListDropped)="dropChips($event)"
      class="chip-drop-list"
    >
      @for (item of _selectedOptions(); track item.asValue) {
        <mat-chip-row
          cdkDrag
          [cdkDragDisabled]="!reorder()"
          [editable]="enabled()"
          class="chip"
          [style.background-color]="item.asValue?.['color']"
        >
          <ng-template
            [ngTemplateOutlet]="chipContent"
            [ngTemplateOutletContext]="{ $implicit: item }"
          ></ng-template>

          @if (enabled()) {
            <button matChipRemove (click)="unselect(item)">
              <app-fa-dynamic-icon
                i18n-matTooltip="
                  tooltip for remove icon on chips of dropdown item
                "
                matTooltip="Remove"
                icon="xmark"
              ></app-fa-dynamic-icon>
            </button>
          }

          <ng-template cdkDragPreview>
            <mat-chip-row
              [editable]="false"
              class="chip chip-preview"
              [style.background-color]="item.asValue?.['color']"
            >
              <ng-template
                [ngTemplateOutlet]="chipContent"
                [ngTemplateOutletContext]="{ $implicit: item }"
              ></ng-template>
            </mat-chip-row>
          </ng-template>
        </mat-chip-row>
      }
    </mat-chip-grid>
  }

  <!--Search-->
  <input
    [hidden]="!isInSearchMode()"
    #inputElement
    [formControl]="autocompleteForm"
    matInput
    style="text-overflow: ellipsis"
    [matAutocomplete]="autoSuggestions"
    [appKeepPanelOpenOnSelect]="!!multi()"
    [matAutocompleteConnectedTo]="autocompleteOrigin"
    (focusout)="onFocusOut($event)"
    [placeholder]="placeholder"
  />
</div>

<!--
Autocomplete
-->
<mat-autocomplete
  [disableRipple]="true"
  #autoSuggestions="matAutocomplete"
  (optionSelected)="select($event.option.value)"
  (closed)="onDropdownClosed()"
  autoActiveFirstOption
  [hideSingleSelectionIndicator]="true"
  [panelWidth]="panelWidth()"
>
  <!-- Select All and Clear Buttons on top of options via content projection-->
  <div>
    <ng-content select="[autocompleteHeader]"></ng-content>
  </div>
  <div>
    @if (!displayFullLengthOptionLabel()) {
      <cdk-virtual-scroll-viewport
        [style.height.px]="viewportHeight()"
        [itemSize]="48"
        minBufferPx="200"
        maxBufferPx="500"
      >
        <mat-option
          [value]="item"
          (onSelectionChange)="onOptionSelectionChange($event)"
          *cdkVirtualFor="
            let item of autocompleteOptions();
            trackBy: trackByOptionValueFn
          "
        >
          <ng-container
            [ngTemplateOutlet]="optionContent"
            [ngTemplateOutletContext]="{ $implicit: item, truncate: true }"
          ></ng-container>
        </mat-option>
      </cdk-virtual-scroll-viewport>
    } @else {
      @for (item of autocompleteOptions(); track item.asValue) {
        <mat-option
          [value]="item"
          class="option-with-wrap"
          (onSelectionChange)="onOptionSelectionChange($event)"
        >
          <ng-container
            [ngTemplateOutlet]="optionContent"
            [ngTemplateOutletContext]="{ $implicit: item, truncate: false }"
          ></ng-container>
        </mat-option>
      }
    }
  </div>

  <ng-template #chipContent let-item>
    @if (reorder()) {
      <span class="drag-handle color-accent" cdkDragHandle>
        <app-fa-dynamic-icon icon="grip-vertical"></app-fa-dynamic-icon>
      </span>
    }

    @if (!templateRef()) {
      {{ item.asString }}
    } @else {
      <ng-template
        [ngTemplateOutlet]="templateRef()"
        [ngTemplateOutletContext]="{ $implicit: item.initial }"
      ></ng-template>
    }
  </ng-template>

  <ng-template #optionContent let-item let-truncate="truncate">
    <div
      class="option-content flex-row disable-autocomplete-active-color align-center"
    >
      @if (multi()) {
        <mat-checkbox [checked]="isSelected(item)"></mat-checkbox>
      }
      @if (!templateRef()) {
        <span
          class="option-label"
          [class.text-truncate]="truncate"
          [class.text-wrap]="!truncate"
          [matTooltip]="item.asString"
          matTooltipPosition="above"
          [class.not-defined-label]="item.isEmpty"
          [class.invalid-label]="item.isInvalid"
        >
          {{ item.asString }}
        </span>
      } @else {
        <div class="option-label item-option">
          <ng-template
            [ngTemplateOutlet]="templateRef()"
            [ngTemplateOutletContext]="{ $implicit: item.initial }"
          ></ng-template>
        </div>
      }
    </div>
  </ng-template>

  <!-- Create new option -->
  @if (showAddOption() && inputElement.value) {
    @for (option of availableCreateOptions(); track $index) {
      <mat-option
        [value]="toCreateOptionValue(option, inputElement.value)"
        [attr.aria-label]="createOptionAriaLabel(option, inputElement.value)"
        (onSelectionChange)="onOptionSelectionChange($event)"
      >
        <em
          i18n="
            Label for adding an option in a dropdown|e.g. Add new My new Option
          "
          >Add new</em
        >
        {{ createOptionLabel(option, inputElement.value) }}
      </mat-option>
    }
  }

  <mat-option style="display: none">
    <!-- This mat-option is never displayed ("display: none") but has to be there,
      because the footer below will only be displayed with at least one mat-option -->
  </mat-option>
  <div class="autocomplete-footer">
    @if (hasMoreOptions()) {
      <em
        class="more-options-hint"
        i18n="Hint shown when dropdown has more options than displayed"
        >Type to filter more results ...</em
      >
    }
    <ng-content select="[autocompleteFooter]"></ng-content>
  </div>
</mat-autocomplete>

Legend

Html element

Component

Html element with directive

Description

Extends

Example

Metadata

Relationships

Used by

Depends on

Index

Properties

Methods

Inputs

Outputs

Inputs

Outputs

Methods

Properties

results matching ""

No results matching ""