angular-copy-text-to-clipboard v1.0.2

Setting up in module's imports

import {AngularClipboardModule} from "angular-copy-text-to-clipboard";

AngularClipboardModule.forRoot({
  text: 'Copied!', // Custom toast text or html
  cssClass: 'test', // Custom style
  duration: 3000, // Toast duration
  showToast: true, // Show toast
  useDefaultStyle: true, // Default toast style
  pointer: true, // Set cursor pointer for clipboard html el
}),

NOTE: Config optional

Usage ClipboardCopyService in ts

import {ClipboardCopyService} from "angular-copy-text-to-clipboard";

export class MovieListComponent implements OnInit, OnDestroy {
  protected ngUnsubscribe: Subject<void> = new Subject<void>();

  constructor(private readonly clipboardCopyService: ClipboardCopyService) {
    this.clipboardCopyService.clipboardCopyStatus$
      .pipe((takeUntil(this.ngUnsubscribe)))
      .subscribe(data => {
        if (!!data) {
          // Text copied!
        }
      })
  }

Usage ClipboardCopyDirective in html

<p clipboard>My text</p> <!-- Clipboard = My text -->
<p>My text</p> <i class="your icon" clipboard [text]="'My text'"></i> <!-- Clipboard = My text -->
<p clipboard [text]="'My custom text 1'">My text</p> <!-- Clipboard = My custom text 1 -->
<p clipboard clipboard text="My custom text 2">My text</p> <!-- Clipboard = My custom text 2 -->

Tips

For copy notification you can use:

• showToast = true
• ClipboardCopyService
• (click)