copy-to-clipboard.directive.ts

import { Directive, HostListener, Input, OnDestroy, OnInit } from '@angular/core';

@Directive({
    selector: '[copyToClipboard]'
})

export class CopyToClipboardDirective implements OnInit, OnDestroy {
    private static copyableElement: HTMLTextAreaElement;

    private static createCopyableElement(): void {
        const copyableElement = document.createElement('textarea');

        Object.assign(copyableElement.style, {
            bottom: '-100%',
            opacity: 0,
            position: 'fixed',
            right: '-100%',
            zIndex: -9999
        });

        document.body.appendChild(copyableElement);

        CopyToClipboardDirective.copyableElement = copyableElement;
    }

    private static removeCopyableElement(): void {
        const { copyableElement } = CopyToClipboardDirective;

        if (copyableElement) {
            copyableElement.remove();
        }
    }

    @Input() public textToCopy: string = '';

    @HostListener('click') public hostElementClicked(): void {
        this.copyToClipboard(this.textToCopy);
    }

    public ngOnInit(): void {
        const { copyableElement, createCopyableElement } = CopyToClipboardDirective;

        if (!copyableElement) {
            createCopyableElement();
        }
    }

    public ngOnDestroy(): void {
        CopyToClipboardDirective.removeCopyableElement();
    }

    private copyToClipboard(textToCopy: string): void {
        const { copyableElement } = CopyToClipboardDirective;

        copyableElement.value = textToCopy;
        copyableElement.select();

        try {
            document.execCommand('copy');
        } catch (e) {
            console.error(e);
        }
    }
}