AngularCopyToClipboard
Angular Copy To Clipboard (Directive/Component/Content projection)
Demo stackblitz
Copy to clipboard by three ways:
- Directive
- Component(Has icon with icon color and icon size)
- Content projection
Table of contents
Install
npm i angular-copy-to-clipboard
Quick start
import { AngularCopyToClipboardModule } from "angular-copy-to-clipboard";
@NgModule({
imports: [AngularCopyToClipboardModule],
})
export class AppModule {}
How to use?
<angular-copy-to-clipboard
[height]="1.5"
[width]="1.5"
[color]="'#3456cc'"
[targetId]="'copy-me'"
(error)="error()"
(success)="success()"
></angular-copy-to-clipboard>
You can use it in each HTML tag that you need
<button
copyToClipboard
[targetId]="'copy-me'"
(error)="error()"
(success)="success()"
>
Please copy me
</button>
<angular-copy-to-clipboard [targetId]="'copy-me'" (error)="error()" (success)="success()">
My component or html element
</angular-copy-to-clipboard>
Define functions
public error(): void {
/** */
}
public success(): void {
/** */
}
Input
Name | Type | Default | Required? | Description |
---|---|---|---|---|
targetId |
string number
|
yes | The Element Id of content that you want to copy. | |
width | number |
1.3rem |
no | Icon width when use as component. |
height | number |
1.3rem |
no | Icon height when use as component. |
color | string |
gray |
no | Icon color when use as component. |
Output
Name | Description |
---|---|
(error) | Define message for error. |
(success) | Define message for success. |
Creator
Hakime sheikhalishahi
Donate
If you like my work and I save your time you can buy me a
My Wallet address , Tether USD (ARBITRUM) :
0x04e125a00BCd45A4DD23279DcAfF1eAFd49DbEf6
License
MIT