Angular CDK Clipboard

https://material.angular.io/

Admin

The Angular CDK Clipboard package provides helpers for working with the system clipboard, offering...

Tokens:557

Snippets:7

Trust Score:9.9

Update:4 months ago

Show doc for...

Tokens:

Raw

### Programmatically Copy Short Text

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

The `Clipboard` service's `copy` method is suitable for copying relatively small amounts of text directly to the user's clipboard.

```typescript
import {Clipboard} from '@angular/cdk/clipboard';

class HeroProfile {
  private clipboard = inject(Clipboard);

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

```

--------------------------------

### Configure Copy Attempts for Directive

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

When using the `cdkCopyToClipboard` directive, you can specify the number of times to attempt copying text using the `cdkCopyToClipboardAttempts` input.

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

```

--------------------------------

### Programmatically Copy Long Text

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

For longer text, use `beginCopy` to buffer the text into an intermediate textarea. Call the returned `PendingCopy` object's `copy` method to complete the operation. Remember to call `destroy` on the `PendingCopy` object when finished to clean up resources.

```typescript
import {Clipboard} from '@angular/cdk/clipboard';

class HeroProfile {
  private clipboard = inject(Clipboard);

  lifetimeAchievements: string;

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

```

--------------------------------

### Add Copy-to-Click Functionality

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

Use the `cdkCopyToClipboard` directive to enable copying text to the clipboard when an element is clicked. The directive selector can also be used as an input for the text content.

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

```

Tokens:

Raw