Migrating ngClipboard / angular-clipboard to modern Angular
ngClipboard and angular-clipboard copied text to the clipboard from a directive, on top of clipboard.js or document.execCommand. They are tied to AngularJS.
What replaces it
| Option | When to choose it |
|---|---|
| Angular CDK Clipboard | First-party: the cdkCopyToClipboard directive and a Clipboard service. |
| navigator.clipboard | The native asynchronous API, when you want no dependency or need to read the clipboard. |
How to migrate it
- Find every copy button and what it copies: a static value, a model value or the content of an element.
- Replace the directive with cdkCopyToClipboard and use its copied event to show feedback.
- For text built from a server response, use the Clipboard service or navigator.clipboard and handle the failure case.
Watch out. The native clipboard API only works on HTTPS or localhost and expects a user gesture. Copying after an awaited request can be rejected in some browsers, so fetch the text before the click when you can.
Other libraries
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn