Setting up in module's imports

1import {AngularClipboardModule} from "angular-copy-text-to-clipboard";
2
3AngularClipboardModule.forRoot({
4  text: 'Copied!', // Custom toast text or html
5  cssClass: 'test', // Custom style
6  duration: 3000, // Toast duration
7  showToast: true, // Show toast
8  useDefaultStyle: true, // Default toast style
9  pointer: true, // Set cursor pointer for clipboard html el
10}),

1NOTE: Config optional

Key	Type	Optional	Default value
pointer	boolean	yes	true
showToast	boolean	yes	true
duration	number	yes	3000
useDefaultStyle	boolean	yes	true
cssClass	string	yes
text	string	yes	Text copied to clipboard!

Usage ClipboardCopyService in ts

1import {ClipboardCopyService} from "angular-copy-text-to-clipboard";
2
3export class MovieListComponent implements OnInit, OnDestroy {
4  protected ngUnsubscribe: Subject<void> = new Subject<void>();
5
6  constructor(private readonly clipboardCopyService: ClipboardCopyService) {
7    this.clipboardCopyService.clipboardCopyStatus$
8      .pipe((takeUntil(this.ngUnsubscribe)))
9      .subscribe(data => {
10        if (!!data) {
11          // Text copied!
12        }
13      })
14  }

Usage ClipboardCopyDirective in html

1<p clipboard>My text</p> <!-- Clipboard = My text -->
2<p>My text</p> <i class="your icon" clipboard [text]="'My text'"></i> <!-- Clipboard = My text -->
3<p clipboard [text]="'My custom text 1'">My text</p> <!-- Clipboard = My custom text 1 -->
4<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)