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
• 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
• [e-mail]

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