Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
ngx-clipboard
Advanced tools
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.
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>
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.
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.
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.
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
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. If you need to use it on 5.x, please use version 10.x.x.
The code are pretty much the same, in 8.0.0 it uses InjectionToken which requires angular4 and above.
You can get it on npm.
npm install ngx-clipboard --save
Open your module file e.g app.module.ts
and update imports array
import { ClipboardModule } from 'ngx-clipboard';
...
imports: [
...
ClipboardModule,
...
]
If you use SystemJS to load your files, you might have to update your config:
System.config({
map: {
'ngx-clipboard': 'node_modules/ngx-clipboard'
}
});
This library support multiple kinds of copy source.
cbContent
attribute<button ngxClipboard [cbContent]="'target string'">Copy</button>
You can assign the parent container to avoid focus trapper issue, #145
<div #container>
<button ngxClipboard [cbContent]="'target string'" [container]="container">Copy</button>
</div>
....
<input type="text" #inputTarget />
<button [ngxClipboard]="inputTarget">Copy</button>
copyFromContent
from ClipboardService
to copy any text you dynamically created.import { ClipboardService } from 'ngx-clipboard'
...
constructor(private _clipboardService: ClipboardService){
...
}
copy(text: string){
this._clipboardService.copyFromContent(text)
}
cbOnSuccess
callback attribute is triggered after copy was successful with $event: {isSuccess: true, content: string}
<button (cbOnSuccess)="copied($event)" [cbContent]="'example string'">Copied</button>
Or updating parameters directly like so
<button (cbOnSuccess)="isCopied = true" [cbContent]="'example string'">Copied</button>
cbOnError
callback attribute is triggered when there's failure in copying with $event:{isSuccess: false}
You can also use the structural directive *ngxClipboardIfSupported to conditionally render the host element
<button ngxClipboard *ngxClipboardIfSupported [cbContent]="'target string'" (cbOnSuccess)="isCopied = true">Copy</button>
1. npm i
2. npm run build
To run demo code locally
npm run start
Please ask your general questions at https://stackoverflow.com/questions/tagged/ngx-clipboard
Kudos to
Thierry Templier This project is inspired by his answer on StackOverflow.
The core function is ported from clipboard.js by @zenorocha.
This project was generated with Angular CLI version 7.
Big thanks to BrowserStack for letting the maintainers use their service to debug browser issues.
FAQs
angular 2 clipboard
The npm package ngx-clipboard receives a total of 128,688 weekly downloads. As such, ngx-clipboard popularity was classified as popular.
We found that ngx-clipboard demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.