Overview
tng-chips is a multi-value input that implements ControlValueAccessor. You can add items from an options dropdown (with (search)) and/or allow free-text entry. Value is T[]. Optional #chipTpl and #optionTpl customize chip and dropdown display.
Quick example
Basic (select from options)
<form [formGroup]="form">
<tng-chips
formControlName="countries"
[options]="options()"
placeholder="Add countries…"
[displayWith]="displayCountry"
[allowFreeText]="false"
(search)="onSearch($event)"
/>
</form>
import { Component, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { TngChips } from '@tailng-ui/ui/form';
@Component({
selector: 'chips-demo',
standalone: true,
imports: [ReactiveFormsModule, TngChips],
template: `<form [formGroup]="form">
<tng-chips formControlName="tags" [options]="options()"
[displayWith]="displayWith" placeholder="Add…"
(search)="onSearch($event)" />
</form>`,
})
export class ChipsDemoComponent {
form = new FormGroup({
tags: new FormControl<string[]>([], { nonNullable: true }),
});
options = signal<string[]>([]);
displayWith = (x: string) => x;
onSearch(term: string) { /* filter or fetch */ }
}
Selected: 0 countries
Features
options + displayWith
Dropdown options; displayWith for chip and list text. Form value is T[].
allowFreeText + parse
When allowFreeText is true, Enter adds the typed string (via parse).
chipTpl / optionTpl
Optional templates for chip display and dropdown option rows.