Copy to Clipboard in Angular with examples

Introduction

Welcome, Angular developers! Have you ever wanted to provide a seamless way for users to copy content to their clipboard directly from your Angular application? Today, you’re in luck! This post will guide you on how to leverage the power of navigator.clipboard.writeText() to copy text from different HTML elements such as textarea, input, and div. Additionally, we’ll craft a generic copyToClipboard() function that can flexibly copy content from any given element. Let’s get to it!

Requirements for Copying to Clipboard

Before we begin, ensure that your Angular app is running in a secure context (HTTPS) since modern browsers require this for clipboard operations. Moreover, clipboard access should be triggered by user gestures, such as a click event, to comply with security measures.

 

Copying Text from a Textarea

To copy text from a textarea, you can use the following example:

document.querySelector('#textareaId').select();
navigator.clipboard.writeText(document.querySelector('#textareaId').value)

Output:

The text within #textareaId is now in your clipboard!

 

Copying Text from an Input Box

Similarly, to copy text from an input box, use the following line of code:

document.querySelector('#inputId').select();
navigator.clipboard.writeText(document.querySelector('#inputId').value)

Output:

The text within #inputId is now in your clipboard!

 

Copying Text from a Div Element

Copying from a div or any non-input element requires a slightly different approach. We need to create a temporary textarea, copy its value, and then remove it from the DOM:

const text = document.querySelector('#divId').innerText;
const textArea = document.createElement('textarea');
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
navigator.clipboard.writeText(textArea.value);
document.body.removeChild(textArea);

Output:

The text within #divId is now in your clipboard!

 

Implementing a Generic copyToClipboard() Function

Now, let’s develop a versatile copyToClipboard() function that can be utilized for any element:

function copyToClipboard(selector) {
    let element = document.querySelector(selector);
    let textToCopy = '';
    
    // Check if it's an input field
    if (['INPUT', 'TEXTAREA'].includes(element.tagName)) {
        element.select();
        textToCopy = element.value;
    } else {
        textToCopy = element.innerText;
        
        // For non-input elements
        const textArea = document.createElement('textarea');
        textArea.value = textToCopy;
        document.body.appendChild(textArea);
        textArea.select();
        document.body.removeChild(textArea);
    }

    navigator.clipboard.writeText(textToCopy)
        .then(() => console.log('Text copied!'))
        .catch(err => console.error('Error copying text: ', err));
}

Usage:

copyToClipboard('#elementId'); // Where #elementId is the ID of the element you want to copy from

Output:

Selected text from the element is now in your clipboard!

 

Conclusive Summary

In summary, copying text to the clipboard in Angular is straightforward with the help of navigator.clipboard.writeText(). We’ve seen how to handle this for textarea, input, and div elements, and we also crafted a generic function copyToClipboard() to handle text copying from any element. Whether you are managing a simple input field or extracting text from complex DOM elements, your Angular application can now offer an enhanced, user-friendly text copying experience.

References

• MDN Web Docs – Clipboard API: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
• Angular Official Documentation: https://angular.io/docs