import { Component } from '@angular/core';
import { WrCopyValue } from 'ngwr/copy-value';
@Component({ imports: [WrCopyValue] })
export class MyComponent {}Copy Value
A value with a copy button beside it.
Installation
Import the class, and @use the entry point in your global styles. Nothing warns you when the @use is missing.
Basic
Takes a string or a number. After a copy the button shows a tick and “Copied” is announced to screen readers.
<wr-copy-value [value]="order.id" />
<wr-copy-value [value]="device.serial" (copied)="onCopied($event)" />Empty
null, undefined and '' show emptyLabel and no button. 0 is a value.
<wr-copy-value [value]="null" />
<wr-copy-value [value]="''" emptyLabel="not set" />Long values
A value that does not fit is cut with an ellipsis and keeps the full text in its title. The copy always takes the whole value.
<div style="width: 16rem">
<wr-copy-value [value]="token" />
</div>Wrap
wrap lets the value run over several lines instead.
<div style="width: 16rem">
<wr-copy-value [value]="address" wrap />
</div>Labels
copyLabel, copiedLabel and emptyLabel override one instance. The copyValue.copy, copyValue.copied and copyValue.empty catalog keys change them all.
<wr-copy-value [value]="order.id" copyLabel="Copy order id" copiedLabel="Order id copied" />provideWrI18nStaticLoader({
en: { copyValue: { copy: 'Copy', copied: 'Copied', empty: '-' } },
});API
| Name | Description | Type | Default |
|---|---|---|---|
value | The value shown and copied. null, undefined and '' are empty. | string | number | null | undefined | null |
wrap | Let a long value wrap over several lines instead of truncating it. | boolean | false |
copyLabel | Accessible name and tooltip of the button. Falls back to copyValue.copy, then 'Copy'. | string | null | null |
copiedLabel | Tooltip and announcement after a copy. Falls back to copyValue.copied, then 'Copied'. | string | null | null |
emptyLabel | What stands in for an empty value. Falls back to copyValue.empty, then '-'. | string | null | null |
(copied) | Emitted with the text that reached the clipboard. | string | — |
(copyFailed) | Emitted when the browser refused the write. | void | — |
CSS variables
Set these on the element itself, with a rule more specific than its Declared on selector. In a global stylesheet, put a class of yours on an ancestor it really has: <body> for an overlay panel, which renders outside your markup. In a component stylesheet the selector alone works, but only for an element in that component's own template. A value on a wrapper or :root is shadowed, because ngwr/copy-value declares each default on its own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-copy-value-button-color | var(--wr-color-on-surface-muted) | .wr-copy-value |
--wr-copy-value-button-copied-color | var(--wr-color-success) | .wr-copy-value |
--wr-copy-value-button-hover-bg | var(--wr-color-hover) | .wr-copy-value |
--wr-copy-value-button-hover-color | var(--wr-color-on-surface) | .wr-copy-value |
--wr-copy-value-button-padding | var(--wr-space-xs) | .wr-copy-value |
--wr-copy-value-button-radius | var(--wr-border-radius-sm) | .wr-copy-value |
--wr-copy-value-empty-color | var(--wr-color-on-surface-muted) | .wr-copy-value |
--wr-copy-value-gap | var(--wr-space-xs) | .wr-copy-value |
Dependencies
| Built on | WrClipboard |
|---|
See also
Directive wrCopyToClipboardCopy a string to the clipboard when the element is clicked.Service WrClipboardCopy text to the clipboard and read it back.Directive wrTypographyStyle any text element with a shared text role.Component DescriptionsA read-only list of labels and their values.Component TableRows of data with sorting, filtering, paging and custom cells.