IonxSearchSelect

A modern Search & Select component for Angular + Ionic.
Built with Standalone Components, Angular Signals, and full CVA (ControlValueAccessor) support.

✨ Features

• 🔎 Searchable select with keyboard navigation
• 🌀 Works with Reactive Forms and Template-driven Forms
• 🧩 Can be used standalone without Angular Forms
• 🌍 Built-in i18n (EN/DE) with overrides
• 🎨 Ionic design, ships as Angular standalone library
• ♻️ No RxJS required (pure Signals API)

📦 Installation

This library requires @ionic/angular and ionicons as peer dependencies.

Install them step by step:

npm install @ionic/angular ionicons

Then install the library:

npm install ionx-search-select

Peer dependencies:

• Angular ≥ 20
• Ionic ≥ 8

🚀 Usage

1. Reactive Forms (FormControl)

// demo.page.ts
import { FormControl } from '@angular/forms';
import { SelectOption } from 'ionx-search-select';

type Id = string;

@Component({
  /* ... */
})
export class DemoPage {
  city = new FormControl<Id | null>(null);

  cityOptions: SelectOption<Id>[] = [
    { value: 'ber', label: 'Berlin' },
    { value: 'ham', label: 'Hamburg' },
    { value: 'muc', label: 'Munich' },
    { value: 'cgn', label: 'Cologne', disabled: true },
    { value: 'fra', label: 'Frankfurt' },
  ];
}

<ionx-search-select [options]="cityOptions" placeholder="Choose a city…" [formControl]="city">
</ionx-search-select>

<p>Selected: {{ city.value }}</p>

2. Template-driven Forms ([(ngModel)])

// demo.page.ts
selectedCity: string | null = null;

cityOptions: SelectOption<string>[] = [
  { value: 'ber', label: 'Berlin' },
  { value: 'ham', label: 'Hamburg' },
  { value: 'muc', label: 'Munich' },
  { value: 'fra', label: 'Frankfurt' },
];

<ionx-search-select [options]="cityOptions" placeholder="Choose a city…" [(ngModel)]="selectedCity">
</ionx-search-select>

<p>Selected: {{ selectedCity }}</p>

3. Standalone (without Angular Forms)

// demo.page.ts
selectedCity: string | null = null;

cityOptions: SelectOption<string>[] = [
  { value: 'ber', label: 'Berlin' },
  { value: 'ham', label: 'Hamburg' },
  { value: 'muc', label: 'Munich' },
];

<ionx-search-select
  [options]="cityOptions"
  [value]="selectedCity"
  (changed)="selectedCity = $event"
>
</ionx-search-select>

<p>Selected: {{ selectedCity }}</p>

⚙️ Inputs

| Input | Type | Default | Description | | ------------------- | ---------------------------------- | -------------- | -------------------------------- | | options | SelectOption<T>[] | [] | Options to display | | placeholder | string | Select… | Trigger label & modal title | | multiple | boolean | false | Enable multi select | | clearable | boolean | true | Show Clear button | | closeOnSelect | boolean | true | Auto close after select (single) | | locale | 'en' \| 'de' | 'en' | Built-in i18n | | i18n | Partial<IonxSearchSelectI18n> | {} | Override any text | | searchPlaceholder | string \| null | null | Explicit search placeholder | | displayWith | (opt: SelectOption<T>) => string | o => o.label | Custom label renderer | | compareWith | (a: T, b: T) => boolean | a===b | Custom equality fn | | trackBy | (o: SelectOption<T>) => unknown | o.value | TrackBy fn |

📤 Outputs

| Output | Payload | Description | | -------------- | ------------------ | ---------------------- | | changed | T \| T[] \| null | Value changed | | openedChange | boolean | Modal open/close state | | opened | void | Modal opened | | closed | void | Modal closed | | cleared | void | Clear clicked |

🔑 Interfaces

export interface SelectOption<T = unknown> {
  value: T;
  label: string;
  disabled?: boolean;
}

export type IonxSearchSelectI18n = {
  clear: string;
  done: string;
  selected: string;
  noResults: string;
  search: string;
  searchAriaLabel: string;
  closeAriaLabel: string;
};

🛠️ Development

Build the library:

ng build ionx-search-select

Run the demo app:

ng serve demo

Run unit tests:

ng test

📄 License

MIT – free to use, modify and distribute.