DEV Community

Cover image for How to copy to clipboard with angular material
Codever profile image Adrian Matei
Adrian Matei for Codever

Posted on • Edited on • Originally published at codever.dev

How to copy to clipboard with angular material

#angular #javascript #codever

Use the click event to pass the text to the handling function, in this case copyToClipboard(bookmark.location)

 <span class="btn-light btn-sm" (click)="copyToClipboard(bookmark.location)" title="Copy link to clipboard"> <i class="far fa-copy copy-link"></i><span class="copy-btn-text">{{copyLinkButtonText}}</span> </span>
Enter fullscreen mode Exit fullscreen mode

To programmatically copy a string use the Clipboard which service copies text to the user's clipboard.
We use a setTimeout to visually inform the user for a brief moment that the copy was successful

 import { Clipboard } from '@angular/cdk/clipboard'; export class BookmarkListElementComponent { copyLinkButtonText = ''; constructor(private router: Router, private clipboard: Clipboard) {} copyToClipboard(location: string) { const copied = this.clipboard.copy(location); if (copied) { this.copyLinkButtonText = ' Copied'; setTimeout(() => this.copyLinkButtonText = '', 1300); } } }
Enter fullscreen mode Exit fullscreen mode

See it in action at www.codever.land:

Copy-to-clipboard-demo

See the reference link (official docs) how to use it for longer texts.


Reference -

https://material.angular.io/cdk/clipboard/overview

Shared with ❤️ from Codever. Use 👉 copy to mine functionality to add it to your personal snippets collection.

Top comments (0)