NgxCopyToClipboard

Click to copy — a fast, lightweight Angular directive to copy text to the clipboard using the modern Clipboard API.

Why Is Copy to Clipboard Useful?

The ngxCopyToClipboard directive provides a seamless way for users to quickly copy content without the need to manually select or retype it. This is especially useful in forms, code snippets, confirmation flows, and other UI/UX scenarios where content needs to be reused.

Installation

1. Install via NPM

npm i --save @andreasnicolaou/ngx-copy-to-clipboard

Requires Angular 19 – 22. For Angular 14 – 18, use @andreasnicolaou/[email protected].

2. Import the Directive

🟢 Standalone components (recommended)

You can directly import the directive into any standalone component:

import { NgxCopyToClipboardDirective } from '@andreasnicolaou/ngx-copy-to-clipboard';

@Component({
  standalone: true,
  selector: 'your-component',
  imports: [NgxCopyToClipboardDirective],
  templateUrl: './your-component.html',
})
export class YourComponent {}

🟠 NgModule-based projects

Use the provided NgxCopyToClipboardModule:

import { NgxCopyToClipboardModule } from '@andreasnicolaou/ngx-copy-to-clipboard';

@NgModule({
  declarations: [],
  imports: [NgxCopyToClipboardModule],
  exports: [],
})
export class YourModule {}

💡 Note: If you prefer an NgModule-based architecture, you can use the module wrapper for compatibility.

✨ Want to Add Toast Notifications?

If you’d like to show toasts or notifications when a user copies content, check out my brand new lightweight library — @andreasnicolaou/toastify. It integrates seamlessly and helps you display stylish, customizable toasts with minimal setup!

API Reference

| Name | Type | Description | | ---------------- | --------------------------- | ------------------------------------------------------------------------- | | textToCopy | string \| null \| undefined | Text value to be copied. null/undefined emit errorMessage on click. | | successMessage | string | Optional message emitted on successful copy. Default: 'Successfully copied'. | | errorMessage | string | Optional message emitted on copy failure. Default: 'Could not copy'. | | onCopyEvent | EventEmitter<string> | Emits successMessage when copying succeeds. | | onErrorEvent | EventEmitter<string> | Emits errorMessage when copying fails. |

Example Usage

In the component:

  const val = 'Hello World!';

  public onSuccess(ev: string){
      console.log(ev);
  }

    public onError(ev: string){
      console.log(ev);
  }

In the template:

<button
  ngxCopyToClipboard
  [textToCopy]="val"
  [successMessage]="'Copied to Clipboard'"
  [errorMessage]="'Not copied to Clipboard'"
  (onCopyEvent)="onSuccess($event)"
  (onErrorEvent)="onError($event)"
>
  Copy
</button>

Contribution

• Having an issue? or looking for support? Open an issue and we will get you the help you need.
• Got a new feature or a bug fix? Fork the repo, make your changes, and submit a pull request.

Support this project

If you find this project useful, please star the repo to let people know that it's reliable. Also, share it with friends and colleagues that might find this useful as well. Thank you :smile: