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.
$ npm install --save ngx-copypaste 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 {
(...)
}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
]
(...)
})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
}