Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

API reference

tngCopy is a directive with one job: resolve a text payload, write it to the clipboard, and report status back to the owner.

Directive selector

The primitive attaches through [tngCopy] or the alias [tngCopyButton] and exports itself as tngCopy for runtime access.

Directive attachment

html
<button
  type="button"
  tngCopy
  [tngCopyText]="payload"
  (tngCopied)="onCopied($event)"
></button>

Inputs and outputs

NameTypeNotes
tngCopyText / tngCopyButtonTextstring or callable valueExplicit payload to copy. tngCopyButtonText also accepts a function or signal.
tngCopyFrom / tngCopyButtonTargetHTMLElement | ElementRef | string | nullFallback source element or selector when direct text is omitted.
tngCopyIgnoreSelectorsstring | string[] | nullRemoves matched nodes from copied DOM text, useful for line numbers or controls.
tngCopyDisabled / tngCopyButtonDisabledbooleanDisables pointer and keyboard activation.
tngCopyButtonFormat'text/plain' | 'text/html'Chooses clipboard format. HTML also writes a plain-text fallback when possible.
tngCopyButtonHotkeystring | nullOptional local hotkey like mod+shift+c while the host or its children are focused.
tngCopyButtonAnnounce'auto' | boolean Controls whether tngCopyAnnounced emits. auto emits only for keyboard-triggered copies.
tngCopiedstringEmits the copied text after a successful write.
tngCopySuccessmethod + text payloadIncludes the copy method used: clipboard or execCommand.
tngCopyErrorerror payloadNormalized error payload when no copy target can be resolved or clipboard write fails.
tngCopyAnnouncedstringAnnouncement text emitted for owners that want to mirror copy feedback into their own live region.

Runtime state

Export the directive instance with #copy="tngCopy" when you need programmatic copy, or when your template wants to react to status(), lastCopiedText(), and error().

Exported runtime API

html
<button
  type="button"
  tngCopy
  #copy="tngCopy"
  [tngCopyText]="payload"
>
  Copy payload
</button>

@if (copy.status() === "success") {
  <p>Copied {{ copy.lastCopiedText() }}</p>
}

await copy.copy();