# Copy Value

> A value with a copy button beside it.

Source: https://ngwr.dev/reference/components/copy-value  
Kind: Component  
Added in v16

## Installation

Import the class, and `@use` the entry point in your global styles. Nothing warns you when the `@use` is missing.

```typescript
import { Component } from '@angular/core';
import { WrCopyValue } from 'ngwr/copy-value';

@Component({ imports: [WrCopyValue] })
export class MyComponent {}
```

```scss
@use 'ngwr/copy-value';
```

## Basic

Takes a string or a number. After a copy the button shows a tick and “Copied” is announced to screen readers.

```angular-html
<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.

```angular-html
<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.

```angular-html
<div style="width: 16rem">
  <wr-copy-value [value]="token" />
</div>
```

## Wrap

`wrap` lets the value run over several lines instead.

```angular-html
<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.

```angular-html
<wr-copy-value [value]="order.id" copyLabel="Copy order id" copiedLabel="Order id copied" />
```

```typescript
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](https://ngwr.dev/reference/services/clipboard) |
| --- | --- |

## See also

- [wrCopyToClipboard](https://ngwr.dev/reference/directives/copy-to-clipboard) — Copy a string to the clipboard when the element is clicked.
- [WrClipboard](https://ngwr.dev/reference/services/clipboard) — Copy text to the clipboard and read it back.
- [wrTypography](https://ngwr.dev/reference/directives/typography) — Style any text element with a shared text role.
- [Descriptions](https://ngwr.dev/reference/components/descriptions) — A read-only list of labels and their values.
- [Table](https://ngwr.dev/reference/components/table) — Rows of data with sorting, filtering, paging and custom cells.