ngx-clipboard

What is ngx-clipboard?

ngx-clipboard is an Angular library that provides a simple way to copy text to the clipboard. It is designed to be easy to use and integrate into Angular applications, offering both directive and service-based approaches for copying text.

What are ngx-clipboard's main functionalities?

Directive-based Copy

This feature allows you to use a directive to copy text to the clipboard. By adding the `ngxClipboard` directive to a button and binding the `cbContent` property to the text you want to copy, you can easily enable copy functionality.

<button ngxClipboard [cbContent]="'Text to copy'">Copy Text</button>

Service-based Copy

This feature allows you to use a service to copy text to the clipboard. By injecting the `ClipboardService` into your component, you can call the `copy` method with the text you want to copy.

import { ClipboardService } from 'ngx-clipboard';

constructor(private clipboardService: ClipboardService) {}

copyText() {
  this.clipboardService.copy('Text to copy');
}

Copy from Input Element

This feature allows you to copy text from an input element. By referencing the input element and using the `copyFromInputElement` method of the `ClipboardService`, you can copy the text contained in the input element.

<input #inputText type="text" value="Text to copy">
<button (click)="clipboardService.copyFromInputElement(inputText)">Copy Text</button>

Other packages similar to ngx-clipboard

clipboard

The `clipboard` package is a modern copy-to-clipboard library that works in both modern and legacy browsers. It provides a simple API for copying text to the clipboard and is not tied to any specific framework, making it versatile for use in various JavaScript projects. Compared to ngx-clipboard, it is more lightweight and framework-agnostic.

copy-to-clipboard

The `copy-to-clipboard` package is a small and simple library for copying text to the clipboard. It is framework-agnostic and can be used in any JavaScript project. It offers a straightforward API and is very lightweight. Compared to ngx-clipboard, it does not provide Angular-specific features but is easier to integrate into non-Angular projects.

angular-clipboard

The `angular-clipboard` package is another Angular library for copying text to the clipboard. It provides similar functionality to ngx-clipboard but with a different API. It is designed specifically for Angular applications and offers both directive and service-based approaches. Compared to ngx-clipboard, it provides an alternative API for achieving the same functionality.

README

ngx-clipboard , F.K.A angular2-clipboard

Angular directive for clipboard.js by @zenorocha

It works with angular version 2.0.0 and up

To make more sense with the future versioning scheme of Angular, the directive selector is now rename to ngxClipboard

Dependencies

• Angular ~2.0.0
• clipboard.js

Install

You can get it on npm.

npm install ngx-clipboard --save

Build project

1. npm i

2. npm run build

Example

plunker

Contributing

1. Your commits conform to the conventions established here
2. This project used commitizen and semantic-release to handle npm version from CI
   • run git add first to add your changes to staging
   • use npm run commit to commit, and CI will do the rest.
   • if changes contain breaking change, use BREAKING CHANGE keyword in the comment to trigger major release
   • before push to git and trigger CI, you can dry run npm run semantic-release locally to make sure the version number is push as expected.

Troubleshooting

1. If you use webpack, check /demo/webpack. Try to use the same version of webpack that demo used, if you run into any error.

2. The latest version (3.0.0+) works with AoT, please check /demo/angular2-aot-webpack to see how to make it work.

Kudos to

Thierry Templier This project is base on his answer on StackOverflow

blacksonic AoT's demo is based on his project