# WrClipboard

> Programmatic clipboard read and write. Uses `navigator.clipboard.writeText` when available, with a hidden-textarea + `execCommand` fallback for non-secure contexts.

Source: https://ngwr.dev/reference/services/clipboard  
Kind: Service

## Install

```angular-ts
import { WrClipboard } from 'ngwr/clipboard';

@Component({ /* … */ })
export class MyComponent {
  private readonly clip = inject(WrClipboard);

  protected async copy(value: string) {
    const ok = await this.clip.write(value);
    if (!ok) console.warn('Copy failed — denied permission or no clipboard');
  }
}
```

## Live demo

Type something, copy it, then click Paste to read it back. Permissions probe shows what the browser will allow.

## Read text

```angular-ts
// Read text. Returns null when unsupported or denied.
const text = await this.clip.read();
if (text) console.log('pasted:', text);
```

## Check permissions

```angular-ts
// Probe clipboard availability (capability + Permissions API).
const state = await this.clip.permission('write');
// 'granted' | 'denied' | 'prompt' | 'unsupported'
```

## Why ngwr provides this

`navigator.clipboard` rejects outside secure contexts and needs a fallback path; this handles both and reports success so the UI can confirm the copy.

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `write(text)` | Write text to the clipboard. Falls back to a hidden-textarea + `execCommand` write when the async API is unavailable. Resolves to `true` on success. | `(text: string) => Promise<boolean>` | `—` |
| `read()` | Read text from the clipboard. Returns `null` when unsupported (older browsers) or when the user denied the permission prompt. | `() => Promise<string \| null>` | `—` |
| `available()` | Is any clipboard write path available (async API or `execCommand`)? | `() => boolean` | `—` |
| `permission(name)` | Report read / write availability. Grounded in the actual Clipboard API capability, then refined by the Permissions API when the browser recognises `clipboard-read` / `clipboard-write`. Returns `unsupported` only when the capability is genuinely missing. | `(name: 'read' \| 'write') => Promise<WrClipboardPermission>` | `—` |

## See also

- [[wrCopyToClipboard]](https://ngwr.dev/reference/directives/copy-to-clipboard) — Host-click directive — drop-in copy button without writing the imperative call.