Advanced

Inject field options at runtime

Fields whose options come from your own data (a location search, a customer list, live inventory) have their own guide. Field Injection walks through marking a field as injected in Edit Logic and wiring optionOverrides to your endpoint.

Personalize suggestions per user

Suggestions can be tailored to each user with what your app already knows about them: a profile, saved preferences, recent activity. Personalization covers what to send, how to keep it current, the size cap, and what stays private.

Controlled mode

Drive state from outside the component with [value]/(valueChange) and [completedParams]/(completedParamsChange) — handy inside wizards, multi-step forms, or a shared parent.

@Component({
  template: `
    <ai-autocomplete
      [value]="text"
      (valueChange)="text = $event"
      [completedParams]="params"
      (completedParamsChange)="params = $event"
      (submitted)="onSubmit($event)"
    ></ai-autocomplete>
  `,
})
export class ControlledComponent {
  text = "";
  params: CompletedParamState[] = [];
}

Or bind a Reactive Forms control: both <ai-autocomplete> and the [aiaInput] directive implement ControlValueAccessor, so [formControl] and [(ngModel)] work out of the box.

SSR / Angular Universal

The component is safe to pre-render with Angular Universal. The live autocomplete boots on the client (the controller is created in ngOnInit and the contentEditable wiring runs in ngAfterViewInit, both guarded by isPlatformBrowser), while the server still emits the wrapper with the correct data-mode so styling doesn't shift on hydration. For Tier 2, gate new AIAutocompleteController() behind isPlatformBrowser — it requires a browser environment.

Accessibility

The component implements the ARIA combobox pattern. Things you should know:

• The dropdown uses role="listbox" with aria-activedescendant pointing at the highlighted option.
• Pills are buttons (role="button") and announce as part of the live input.
• Keyboard: arrow keys navigate, Enter submits, Tab autocompletes, Escape closes the dropdown.