Overview
tng-autocomplete is a standalone combobox that implements ControlValueAccessor for Angular forms. You supply options, a displayWith function, and handle (search) to filter or fetch options. Optional #optionTpl and #inputTpl templates customize list and selected display.
Quick example
Basic (country search)
<form [formGroup]="form">
<tng-autocomplete
formControlName="country"
[options]="options()"
[displayWith]="displayCountry"
placeholder="Search country…"
(search)="onSearch($event)"
/>
</form>
import { Component, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { TngAutocomplete } from '@tailng-ui/ui/form';
@Component({
selector: 'autocomplete-demo',
standalone: true,
imports: [ReactiveFormsModule, TngAutocomplete],
template: `<form [formGroup]="form">
<tng-autocomplete formControlName="country" [options]="options()"
[displayWith]="displayCountry" placeholder="Search country…"
(search)="onSearch($event)" />
</form>`,
})
export class AutocompleteDemoComponent {
form = new FormGroup({
country: new FormControl<Country | null>(null),
});
options = signal<Country[]>([]);
displayCountry = (c: Country) => `${c.code} ${c.name}`;
onSearch(term: string) {
const v = term.toLowerCase().trim();
this.options.set(v ? ALL_OPTIONS.filter(c =>
c.name.toLowerCase().includes(v) || c.iso.toLowerCase().includes(v)) : []);
}
}
Features
options + displayWith
Bind options (array) and displayWith (item → string) for input/list text. Form value is the selected object.
(search)
Emits the current input text so you can filter locally or call an API. Update options in response.
optionTpl / inputTpl
Optional #optionTpl (dropdown rows) and #inputTpl (selected value in input when closed).
Forms-ready
Full ControlValueAccessor; use formControlName or ngModel.
Tip: Typing clears the selection and opens the panel; (search) fires so you can filter or fetch. Select an option to set the form value.