Autocomplete

The ownable Autocomplete install gives your app a local wrapper over the TailNG primitive so you can tune filtering defaults, option mapping, and trigger markup inside the product repo.

Why own Autocomplete locally

Autocomplete usually needs product-specific option labels, disabled rules, and search copy. Local ownership makes it easier to keep those decisions close to the feature code that uses them.

Adjust option mapping and placeholder defaults without waiting on a package release.
Keep release-owner, repository, or geography data contracts inside the app repo.
Review wrapper markup and styling in the same pull request as product feature work.

What the install includes

The registry-backed autocomplete install writes the wrapper component, template, styles, and export barrel into your application so the generated files can evolve with the rest of your product code.

Ownable Install

Install Autocomplete from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm dlx tailng add autocomplete

npx tailng add autocomplete

Generated files

The command scaffolds local files under src/app/tailng-ui/autocomplete.

src/app/tailng-ui/autocomplete/tng-autocomplete-primitive.ts
src/app/tailng-ui/autocomplete/tng-autocomplete.ts
src/app/tailng-ui/autocomplete/tng-autocomplete.html
src/app/tailng-ui/autocomplete/tng-autocomplete.css
src/app/tailng-ui/autocomplete/index.ts

Import in your feature module/component

import { TngAutocomplete, TngAutocompletePrimitive } from './tailng-ui/autocomplete';

Usage

<tng-autocomplete
  [options]="releaseOwners"
  [value]="selectedOwner()"
  (valueChange)="selectedOwner.set($event)"
  [getOptionValue]="getOwnerValue"
  [getOptionLabel]="getOwnerLabel"
  placeholder="Search release owners"
  [ariaLabel]="'Release owner'"
></tng-autocomplete>