ngx-copypaste v19.0.0

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
}