ngx-clipboard

What is ngx-clipboard?

ngx-clipboard is an Angular library that provides a simple way to copy text to the clipboard. It is designed to be easy to use and integrate into Angular applications, offering both directive and service-based approaches for copying text.

What are ngx-clipboard's main functionalities?

Directive-based Copy

This feature allows you to use a directive to copy text to the clipboard. By adding the `ngxClipboard` directive to a button and binding the `cbContent` property to the text you want to copy, you can easily enable copy functionality.

<button ngxClipboard [cbContent]="'Text to copy'">Copy Text</button>

Service-based Copy

This feature allows you to use a service to copy text to the clipboard. By injecting the `ClipboardService` into your component, you can call the `copy` method with the text you want to copy.

import { ClipboardService } from 'ngx-clipboard';

constructor(private clipboardService: ClipboardService) {}

copyText() {
  this.clipboardService.copy('Text to copy');
}

Copy from Input Element

This feature allows you to copy text from an input element. By referencing the input element and using the `copyFromInputElement` method of the `ClipboardService`, you can copy the text contained in the input element.

<input #inputText type="text" value="Text to copy">
<button (click)="clipboardService.copyFromInputElement(inputText)">Copy Text</button>

Other packages similar to ngx-clipboard

clipboard

The `clipboard` package is a modern copy-to-clipboard library that works in both modern and legacy browsers. It provides a simple API for copying text to the clipboard and is not tied to any specific framework, making it versatile for use in various JavaScript projects. Compared to ngx-clipboard, it is more lightweight and framework-agnostic.

copy-to-clipboard

The `copy-to-clipboard` package is a small and simple library for copying text to the clipboard. It is framework-agnostic and can be used in any JavaScript project. It offers a straightforward API and is very lightweight. Compared to ngx-clipboard, it does not provide Angular-specific features but is easier to integrate into non-Angular projects.

angular-clipboard

The `angular-clipboard` package is another Angular library for copying text to the clipboard. It provides similar functionality to ngx-clipboard but with a different API. It is designed specifically for Angular applications and offers both directive and service-based approaches. Compared to ngx-clipboard, it provides an alternative API for achieving the same functionality.

README

ngx-clipboard

Installation

To install this library, run:

$ npm install ngx-clipboard --save

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install ngx-clipboard

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { SampleModule } from 'ngx-clipboard';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    LibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<sampleComponent></sampleComponent>

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © Sam Lin