ng2-clipboard

ng2-clipboard

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

$3

``bash
npm i --save ts-clipboard
npm i --save ng2-clipboard
`

$3

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












}
`

output

!alt text


#### ClipboardService

`typescript
import { Component, OnInit } from '@angular/core';
import { ClipboardService } from 'ng2-clipboard/ng2-clipboard';

@Component({
moduleId: module.id,
selector: 'sd-home',
template:

{{someText}}

constructor(private clipboard: ClipboardService) { }
errorMessage: string;
someText: string =
this
is some
nicely
formatted text;

copyToClipboard = () => { this.clipboard.copy(this.someText); }

ngOnInit() { }

}
`

output


!alt text

$3

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