JsDaddy
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
$ npm install --save ngx-copypastebun
$ bun install --save ngx-copypasteQuickstart 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 }