ng2-clipboard

ng2-clipboard

a simple component and service for copying text to the user's clipboard.

installation:

npm i --save ts-clipboard
npm i --save ng2-clipboard

usage:

importing in angular-seed (mgechev) project

project.config.ts:

  let additionalPackages: ExtendPackages[] = [{
    name: 'ng2-clipboard',
    path: 'node_modules/ng2-clipboard/index.js'
  },
  {
    name: 'ng2-font-awesome',
    path: 'node_modules/ng2-font-awesome/index.js'
  },
  {
    name: 'ts-clipboard',
    path: 'node_modules/ts-clipboard/ts-clipboard.js'
  }];

  this.addPackagesBundles(additionalPackages);

bundling with systemjs builder

importing the module

import { ClipboardModule } from 'ng2-clipboard';
...


#### ClipboardComponent

all of the below usages are valid:

```html
<clipboard-component [content]="someText" [faIcon]="true"></clipboard-component>
<br/>
<clipboard-component [content]="someText" [img]="'assets/img/terribleIcon.png'" [altText]="'copy to clipboard'"></clipboard-component>
<br/>
<clipboard-component [content]="someText" [text]="'click to copy'" [altText]="'copy to clipboard'"></clipboard-component>
<br/>
<clipboard-component [content]="someText" [img]="'assets/img/terribleIcon.png'" [faIcon]="true" [text]="'click to copy'"></clipboard-component>
<br/>
}

output

ClipboardService

import { Component, OnInit } from '@angular/core';
import { ClipboardService } from 'ng2-clipboard/ng2-clipboard';
 
@Component({
  moduleId: module.id,
  selector: 'sd-home',
  template: `
<div class="card card-dp">
  <button class="btn btn-primary" (click)="copyToClipboard()">copy to clipboard</button>
  <pre>{{someText}}</pre>
</div>
  `,
  styleUrls: ['home.component.css'],
})
 
export class HomeComponent implements OnInit {
 
  constructor(private clipboard: ClipboardService) { }
  errorMessage: string;
  someText: string = `
this
is some
nicely
formatted text`;
 
  copyToClipboard = () => { this.clipboard.copy(this.someText); }
 
  ngOnInit() { }
 
}

output

imports:

  @Input() content: string; // the text to be copied
  @Input() altText: string = 'copy to clipboard'; // the title / altText to be displayed on mouseover