Utilities

Clipboard

Copies a value on click and says so with a kit toast. Works outside a secure context too, and makes a plain element reachable from the keyboard.

Part of @tectra-ng/utils (npm install @tectra-ng/utils, also included in tectra-ng).

Features4

API

Theming

Basic

[txCopy] on a button: the value goes to the clipboard and a "Copied to clipboard" toast appears in the tectra locale.

4 lines

<tx-input-group class="field">  <input txInput readonly aria-label="Invite link" [value]="invite" />  <button txButton icon="copy" aria-label="Copy invite link" [txCopy]="invite"></button></tx-input-group>

Plain element

On a plain element the directive adds role="button" and a tab stop, so Enter and Space copy too. Tab to an id and press Enter.


`ORD-1042`	Northwind Studio
`ORD-1043`	Blue Harbor
`ORD-1044`	Oakline Partners

5 lines

<tx-table ariaLabel="Orders" dataKey="id" [value]="orders" [columns]="columns">  <ng-template txTableCell="id" let-value="value">    <code class="id" [txCopy]="value" [attr.aria-label]="'Copy ' + value">{{ value }}</code>  </ng-template></tx-table>

Messages

Your own toast text, or [copyMessage]="false" and a check mark from the copied output instead.

18 lines

<div class="flex">  <button    txButton    label="Copy API key"    severity="secondary"    txCopy="tx_live_51Hq2…"    copyMessage="API key copied — keep it secret"  ></button>  <button    txButton    severity="secondary"    [icon]="done() ? 'check' : 'copy'"    [label]="done() ? 'Copied' : 'Copy without a toast'"    txCopy="SUMMER-26"    [copyMessage]="false"    (copied)="flash()"  ></button></div>

Service

TxClipboard.copy() from code — here the filters of a report as JSON — with the same toasts.