Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@tabuckner/ngx-clipboard
Advanced tools
Readme
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>
Special thanks to @surajpoddar16 for implementing this feature
To handle copy response globally, you can subscribe to copyResponse$
exposed by the ClipboardService
export class ClipboardResponseService {
constructor(
private _clipboardService: ClipboardService,
private _toasterService: ToasterService
) {
this.handleClipboardResponse();
}
handleClipboardResponse() {
this._clipboardService.copyObservable$.subscribe((res: IClipboardResponse) => {
if (res.isSuccess) {
this._toasterService.pop('success', undefined, res.successMessage);
}
});
}
}
Special thanks to @surajpoddar16 for implementing this feature
This library creates a textarea element at the root of the body for its internal use. By default it only destroys it when the directive is destroyed. If you'd like it to be destroyed after each copy to clipboard, provide root level module configuration like this:
ClipboardService.configure({ cleanUpAfterCopy: true });
Special thanks to @DmitryEfimenko for implementing this feature
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.
This project exists thanks to all the people who contribute. [Contribute].
Become a financial contributor and help us sustain our community. [Contribute]
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
FAQs
angular 2 clipboard
The npm package @tabuckner/ngx-clipboard receives a total of 13 weekly downloads. As such, @tabuckner/ngx-clipboard popularity was classified as not popular.
We found that @tabuckner/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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.