docs

`tngChips`

The root directive owns the list semantics and the removal bookkeeping. Headless usage means you keep the DOM around it while the primitive emits the next value array when removal succeeds.

<section
  tngChips
  [tngChipsValues]="selectedTopics()"
  (valuesChange)="onSelectedTopicsChange($event)"
  [tngChipsAriaLabel]="'Selected topics'"
>
  @for (topic of selectedTopics(); track topic) {
    <span tngChip [tngChipValue]="topic" [tngChipLabel]="topic">
      <span>{{ topic }}</span>
      <button tngChipRemove type="button">&times;</button>
    </span>
  }
</section>

Entry	Type	Details
`tngChipsValues`	`readonly unknown[] \| undefined`	Controlled values array used when the root should emit a next array after a remove action.
`tngChipsDefaultValues`	`readonly unknown[]`	Seeds the primitive for uncontrolled setups when you want the root to track its own values.
`tngChipsDisabled`	`boolean`	Disables the whole chip list and blocks projected remove actions.
`tngChipsAriaLabel`	`string \| null`	Sets the accessible label on the list root.
`valuesChange`	`output<readonly unknown[]>`	Emits the next values array after a successful remove action.
`chipRemove`	`output<unknown>`	Emits the removed chip value whenever a chip successfully removes itself.

`tngChip`

Each chip item stays yours. The primitive adds listitem semantics, removal behavior, and disabled state reflection to the markup you project.

Input	Type	Details
`tngChipValue`	`unknown`	Identity for the chip item and the value emitted when it is removed.
`tngChipLabel`	`string \| null`	Accessible label used for the auto-generated remove button copy.
`tngChipDisabled`	`boolean`	Marks the chip disabled and blocks pointer or keyboard removal.
`tngChipRemovable`	`boolean`	Lets you keep the chip visible while opting it out of removal.

`tngChipRemove`

The remove control is intentionally small. It stays focusable in DOM order and reflects a focused state hook when you want to draw a custom ring.

Capability	Type	Details
`tngChipRemoveAriaLabel`	`string \| null`	Overrides the default “Remove <label>” aria-label when you need custom copy.
`Enter / Space`	`Keyboard behavior`	Press Enter or Space on the remove control to remove the owning chip when removal is allowed.
`data-focused`	`State hook`	Applied while the remove control is focused so you can draw a ring without extra JavaScript.

Reflected state

The primitive reflects stable slots and state so you can style chip lists without brittle DOM assumptions.

<section tngChips data-slot="chips" role="list">
  <span tngChip data-slot="chip" role="listitem" data-value="docs">Docs</span>
  <button tngChipRemove data-slot="chip-remove" data-focused></button>
</section>

Attribute	Scope	Purpose
`data-slot="chips"`	`Root`	Stable hook for the list container.
`data-slot="chip"`	`Item`	Stable hook for each projected chip body.
`data-slot="chip-remove"`	`Remove control`	Stable hook for the projected remove button.
`data-disabled`	`Root / item / remove`	Reflected on disabled roots and chips so you can style them consistently.

`tngChips`

Root attachment

`tngChip`

`tngChipRemove`

Reflected state

Reflected slots and state