Clipboard copy behavior for input fields, tokens, API keys
CngxCopyValue
DirectivePrimaryv0.1.0WCAG AA
projects/forms/input/copy-value.directive.ts
Import#
import { CngxCopyValue } from '@cngx/forms/input'
Description#
Clipboard copy behavior for input fields, tokens, API keys.
Place on a button or any clickable element. Copies value input or reads from
a source element. Shows a copied signal for feedback (auto-resets after resetDelay).
<input #tokenInput readonly [value]="token()" />
<button [cngxCopyValue] [source]="tokenInput" #cp="cngxCopyValue">
{{ cp.copied() ? 'Copied!' : 'Copy' }}
</button>
<!-- With explicit value -->
<button [cngxCopyValue]="apiKey()">Copy API Key</button>Metadata#
Host#
Index#
Inputs#
resetDelay#
number | undefinedinput()
Duration in ms to keep copied true after a successful copy. Falls back to global config.
source#
HTMLInputElement | HTMLTextAreaElement | undefinedinput()
Reference to the source element (fallback when value input not set).
value#
string | undefinedinput()
The value to copy. Falls back to source element's value if not provided.
default
undefined, { alias: 'cngxCopyValue' }Outputs#
Instance Properties#
supported#
unknownReadonly
Whether the Clipboard API is available.
typeof navigator !== 'undefined' && !!navigator.clipboardMethods#
HostListeners#
| Event | Handler |
|---|---|
(click) | click() |