The clipboard package provides helpers for working with the system clipboard.

Click an element to copy

The cdkCopyToClipboard directive can be used to easily add copy-on-click functionality to an existing element. The directive selector doubles as an @Input() for the text to be copied.

<img src="avatar.jpg" alt="Hero avatar" [cdkCopyToClipboard]="getShortBio()">

Programmatically copy a string

The Clipboard service copies text to the user's clipboard. It has two methods: copy and beginCopy. For cases where you are copying a relatively small amount of text, you can call copy directly to place it on the clipboard.

class HeroProfile {
  constructor(private clipboard: Clipboard) {}

  copyHeroName() {
    this.clipboard.copy('Alphonso');
  }
}

However, for longer text the browser needs time to fill an intermediate textarea element and copy the content. Directly calling copy may fail in this case, so you can pre-load the text by calling beginCopy. This method returns a PendingCopy object that has a copy method to finish copying the text that was buffered. Please note, if you call beginCopy, you must clean up the PendingCopy object by calling destroy on it after you are finished.

class HeroProfile {
  lifetimeAchievements: string;

  constructor(private clipboard: Clipboard) {}

  copyAchievements() {
    const pending = this.clipboard.beginCopy(this.lifetimeAchievements);
    let remainingAttempts = 3;
    const attempt = () => {
      const result = pending.copy();
      if (!result && --remainingAttempts) {
        setTimeout(attempt);
      } else {
        // Remember to destroy when you're done!
        pending.destroy();
      }
    };
    attempt();
  }
}

If you're using the cdkCopyToClipboard you can pass in the cdkCopyToClipboardAttempts input to automatically attempt to copy some text a certain number of times.

<button [cdkCopyToClipboard]="longText" [cdkCopyToClipboardAttempts]="5">Copy text</button>