NgxCopyToClipboard

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

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.

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

Requires Angular 19 – 22. For Angular 14 – 18, use @andreasnicolaou/ngx-copy-to-clipboard@3.x.

🟢 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.

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!

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>

• 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.

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 😄