Install
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
// Read text. Returns null when unsupported or denied.
const text = await this.clip.read();
if (text) console.log('pasted:', text);Check permissions
// 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> | — |