NGX COPYPASTE

NGX COPYPASTE is the best directive to copy any content on any element

You can also try our NGX MASK check it. You can also try our NGX LOADER INDICATOR check it.

You can try live demo with examples.

Installing

$ npm install --save ngx-copypaste

Quickstart if ngx-copypaste version >= 15.0.0

Pay attention this version works for angular >= 14.0.0

Import ngx-copypaste directive to your standalone component

@Component({
  selector: 'ngx-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [
    (...)
    NgxCopyPasteDirective,
    (...)
  ],
})
export class AppComponent {
    (...)
}

Quickstart if ngx-copypaste version < 15.0.0

Pay attention this version works for angular < 15.0.0

Import ngx-copypaste module in Angular app.

import {NgxCopyPasteModule} from 'ngx-copypaste'

(...)

@NgModule({
  (...)
  imports: [
    NgxCopyPasteModule
  ]
  (...)
})

Usage

From input

<input type="text" ngxCopyPaste #cp="copy" />

<button (click)="cp.copy()">Copy</button>

From any HTML tag

<p ngxCopyPaste #cp="copy">Lorem ipsum</p>

<button (click)="cp.copy()">Copy</button>

From complex div

<div ngxCopyPaste #cp="copy">
    <h1>Lorem ipsum</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum augue at ante
        sollicitudin posuere. Pellentesque congue consequat enim quis luctus.
    </p>
    <div>
        <h2>Lorem ipsum</h2>
    </div>
</div>

<button (click)="cp.copy()">Copy</button>

Also you can bind it to any tag

<p ngxCopyPaste #cp="copy">Lorem ipsum</p>

<p (click)="cp.copy()">Copy</p>

Output success cb

<p ngxCopyPaste #cp="copy" (successCb)="copy()">Lorem ipsum</p>

<p (click)="cp.copy()">Copy</p>

public copy(): void { your code }