Overview
tng-select is a dropdown select that implements ControlValueAccessor. You supply options (array of any type) and displayWith to format the selected value. Optional #optionTpl and #valueTpl customize list and trigger display.
Quick example
Basic
<form [formGroup]="form">
<tng-select
formControlName="fruit"
[options]="fruits"
[displayWith]="displayFruit"
placeholder="Choose a fruit…"
/>
</form>
fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
form = new FormGroup({
fruit: new FormControl<string | null>(null),
});
displayFruit = (v: string) => v;
Features
options + displayWith
Bind options (array) and displayWith (item → string). Form value is the selected item (or null).
optionTpl / valueTpl
Optional #optionTpl (dropdown rows) and #valueTpl (trigger display when closed).
selected / closed
Outputs (selected) when user picks an option and (closed) when the overlay closes.