AngularCopyToClipboard

Demo

Copy to clipboard by three ways:

• Directive
• Component(Has icon with icon color and icon size)
• Content projection

Table of contents

• Install
• Quick start
• How to use?
• Input
• Output
• Creator
• Donate
• License

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?

• As Component

<angular-copy-to-clipboard
  [height]="1.5"
  [width]="1.5"
  [color]="'#3456cc'"
  [targetId]="'copy-me'"
  (error)="error()"
  (success)="success()"
></angular-copy-to-clipboard>

• As Directive

You can use it in each HTML tag that you need

<button
  copyToClipboard
  [targetId]="'copy-me'"
  (error)="error()"
  (success)="success()"
>
  Please copy me
</button>

• As Content projection

<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

• http://www.linkedin.com/in/hakime-sheikhalishahi
• [email protected]

Donate

If you like my work and I save your time you can buy me a 🍺 or 🍕

My Wallet address , Tether USD (ARBITRUM) : 0x04e125a00BCd45A4DD23279DcAfF1eAFd49DbEf6

License

MIT