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

From 6.0.0, there is no other JS dependency anymore. Just Angular.

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 >=5.0.0

If you need to use it on 2.x, please use version 7.x.x. If you need to use it on 4.x, please use version 8.x.x.

The code are pretty much the same, in 8.0.0 it uses InjectionToken which requires angular4 and above.

Install

You can get it on npm.

npm install ngx-clipboard --save

Build project

1. npm i

2. npm run build

Usage

If you use SystemJS to load your files, you might have to update your config:

System.config({
    map: {
        'ngx-clipboard': 'node_modules/ngx-clipboard'
    }
});

For webpack / Angular CLI, it works as any other libraries. Please check demo folder for more help.

This library support 2 kinds of copy source.

You can either set

[cbContent]="'target string'"

Or

[ngxClipboard]="inputTarget" 

Or

You can just use copyFromContent from clipboard.service to copy any text you dynamically created. (the second parameter is the Angular Renderer)

PLEASE CHECK WITH PLUNKER FIRST

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 inspired by his answer on StackOverflow.

The core function is ported from clipboard.js by @zenorocha.

blacksonic AoT's demo is based on his project.

robisim74 This project uses his library starter.