Copy to clipboard angular, not working on safari

Question

Hi I have a directive that copies to the clipboard. But my friend told me that it didn't work on safari(Works on chrome etc). I have no way of testing this. So I hope you guys could help me! :)

My Directive looks like this:

import { Directive, Input, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({ selector: '[CopyToClipboard]' })
export class CopyClipboardDirective {

    @Input('CopyToClipboard')

    public payload: string;

    @Output('copied')

    public copied: EventEmitter<string> = new EventEmitter<string>();

    @HostListener('click', ['$event'])

    public onClick(event: MouseEvent): void {
        event.preventDefault();

        if (!this.payload) {
            return;
        }

        const listener = (e: ClipboardEvent) => {
            const clipboard = e.clipboardData || window['clipboardData'];
            clipboard.setData('text', this.payload.toString());
            e.preventDefault();
            this.copied.emit(this.payload);
        };

        document.addEventListener('copy', listener, false);
        document.execCommand('copy');
        document.removeEventListener('copy', listener, false);

    }
}

How can I make it work on Safari? I have no experiences on working with Safari.

Expected result: "Copy the input to clipboard"

Errors: "None, that I know of, it runs through but does not copy the input"

Why it's not a duplicate is because I'm not using a input. I have a string value that is suppose to arrive as an input in the directive.