1 import { Component, HostListener, Input } from '@angular/core';
3 import { detect } from 'detect-browser';
4 import { ToastrService } from 'ngx-toastr';
6 import { Icons } from '~/app/shared/enum/icons.enum';
9 selector: 'cd-copy-2-clipboard-button',
10 templateUrl: './copy2clipboard-button.component.html',
11 styleUrls: ['./copy2clipboard-button.component.scss']
13 export class Copy2ClipboardButtonComponent {
15 private source: string;
25 constructor(private toastr: ToastrService) {}
27 private getText(): string {
28 const element = document.getElementById(this.source) as HTMLInputElement;
32 @HostListener('click')
35 const browser = detect();
36 const text = this.byId ? this.getText() : this.source;
37 const toastrFn = () => {
38 this.toastr.success('Copied text to the clipboard successfully.');
40 if (['firefox', 'ie', 'ios', 'safari'].includes(browser.name)) {
41 // Various browsers do not support the `Permissions API`.
42 // https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API#Browser_compatibility
43 navigator.clipboard.writeText(text).then(() => toastrFn());
45 // Checking if we have the clipboard-write permission
47 .query({ name: 'clipboard-write' as PermissionName })
48 .then((result: any) => {
49 if (result.state === 'granted' || result.state === 'prompt') {
50 navigator.clipboard.writeText(text).then(() => toastrFn());
55 this.toastr.error('Failed to copy text to the clipboard.');