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";
}
Support
If you enjoyed this tip and found it useful, consider buying me a coffee. Thanks in advance!
![Buy Me a Coffee at ko-fi.com](/images/kofi.webp)