Angular-copy-to-clipboard NPM

AngularCopyToClipboard

Copy to clipboard by three ways:

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

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.