copy-44.directive.ts

import { Directive, ElementRef, Input, NgZone } from '@angular/core';
import { HotToastService } from '@ngneat/hot-toast';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { fromEvent, switchMap } from 'rxjs';

@UntilDestroy()
@Directive({
  selector: '[copy]'
})
export class CopyDirective {
  @Input() copy: string;

  constructor(
    private host: ElementRef<HTMLElement>,
    private zone: NgZone,
    private toast: HotToastService
  ) {
  }

  ngOnInit() {
    this.zone.runOutsideAngular(() => {
      fromEvent(this.host.nativeElement, 'click').pipe(
        switchMap(() => navigator.clipboard.writeText(this.copy)),
        untilDestroyed(this)
      ).subscribe(() => this.toast.success('Copied!'))
    })
  }
}