Copy to clipboard with angular material

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"></span>

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);


See it in action at


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

Reference -

Shared with from Codever. ๐Ÿ‘‰ Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Codever is open source on Github โญ๐Ÿ™

Subscribe to our newsletter for more code resources and news

Adrian Matei (aka adixchen)

Adrian Matei (aka adixchen)
Life force expressing itself as a coding capable human being

routerLink with query params in Angular html template

routerLink with query params in Angular html template code snippet Continue reading