Angular CDK Clipboard

Angular CDK's clipboard package provides helpers for working with the system clipboard.

One of them is the cdkCopyToClipboard directive that 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.

<label for="clipboard-input-example">Text to be copied: </label>
<input id="clipboard-input-example" type="text" [(ngModel)]="value" />
<button [cdkCopyToClipboard]="value">Copy to clipboard</button>

Add the ClipboardModule to your component to use the directive.

import { ClipboardModule } from "@angular/cdk/clipboard";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [CommonModule, ClipboardModule, FormsModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  value = "text to be copied";
}