Advanced

Option overrides

Inject or compute options client-side, per suggestion type. Useful when an option list depends on the user's typed input (e.g. dollar amounts, account names) or comes from your own state.

overrides = {
  account: () => [
    { text: "Savings", is_tappable: true, kind: null },
    { text: "Checking", is_tappable: true, kind: null },
  ],
  value: (query: string) => {
    const digits = query.replace(/\D/g, "");
    if (!digits) return [{ text: "$100", is_tappable: true, kind: null }];
    return [{ text: `$${digits}`, is_tappable: true, kind: null }];
  },
};

// <ai-autocomplete [optionOverrides]="overrides" (submitted)="onSubmit($event)" />

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.