Create Copy to Clipboard in Angular 10 using ngx-clipboard Package

Last updated on by Digamber

This is a comprehensive tutorial; in this tutorial, we will learn how to integrate Copy to Clipboard functionality in Angular 10|9 using the ngx-clipboard package.

Copy to Clipboard is a feature that amplifies the user experience by easily copying content. Such as deals coupons, copying repo url from GitHub, Copy text from Google Translate, offer codes, and many more.

We profoundly define a button with copy text that allows site visitors to copy and paste the content where they want to. Apparently, we have come up with two coherent methods to get this feature implemented in angular application.

Create New Angular Application

Creating an Angular application is profoundly easy using Angular CLI; you can install it using the following command.

npm install -g @angular/cli

Now, you are ready to invoke the given below command to install a brand new Angular application.

ng new angular-copy-to-clipboard-example

Move to the application’s root.

cd angular-copy-to-clipboard-example

Execute the following command to start the application.

ng serve --open

Install ngx-clipboard Module in Angular

We will now install the ngx-clipboard package through NPM; it is a pure angular clipboard directive that helps copy and paste the content in Angular.

npm i ngx-clipboard

Import ClipboardModule in App Module

Generically, working with the ngx-clipboard plugin is only possible when we import ClipboardModule in the app module.

Add the following code in the app.module.ts file.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { ClipboardModule } from 'ngx-clipboard';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ClipboardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Implement Copy to Clipboard in Angular

As you can see, the manifestation of the following code concludes the ngxClipboard and [cbContent] properties.

Pass the text string that needs to be copied, So use the [cbContent] property to copy the inline content.

Open the Angular HTML template and place the following code inside of it.

<div #container>
  <button ngxClipboard [cbContent]="'Content to be copied.'" [container]="container">Copy</button>
</div>

Copy to Clipboard Dynamically

We require to import the ClipboardService service from the ‘ngx-clipboard’ package. Apparently, we need to define the copyContent() function. It lets you dynamically create copy to clipboard functionality.

Place the code in app.component.ts file:

import { Component } from '@angular/core';
import { ClipboardService } from 'ngx-clipboard';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
 
  text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";

  constructor(private clipboardService: ClipboardService) { }

  copyContent() {
    this.clipboardService.copyFromContent(this.text)
  }

}

Place the code in app.component.html file:

<div #container>
  <button (click)="copyContent()">Copy Me</button>
</div>

Copy to Clipboard using Callback

The cbOnSuccess event is a callback event; it comes into action when the content is successfully copied.

Add the code in app.component.html file:

<h3>Copy from Clipboard URL</h3>

<div [ngClass]="contenCopied ? 'web-path url-init' : 'web-path'">
  <div class="web-path-code">{{couponText}}</div>

  <ng-container *ngIf="contenCopied; else copiedNgTemp">
    <div class="url-copied">Copied!</div>
  </ng-container>

  <ng-template #copiedNgTemp>
    <div (cbOnSuccess)="contentCopied($event)" ngxClipboard [cbContent]="couponText">
      <div class="copy-url"></div>
    </div>
  </ng-template>
</div>

Insert the following code in app.component.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
 
  couponText = 'https://www.positronx.io/';

  contenCopied = false;

  contentCopied(e) {
    this.contenCopied = e.isSuccess;
  }

}

Finally add the styling to clipboard. So, add the given below code in app.component.css:

.url-init {
    border-color: #e5e5e5 !important;
    background: #71d675;
}
.web-path {
    border: 2px solid #ccc;
    width: 350px;
    display: inline-block;
    font-size: 20px;
}

.web-path-code {
    padding: 15px;
    display: inline-block;
    float: left;
    font-weight: bold;
}

.copy-url {
    padding: 12px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;    
}

.url-copied {
    padding: 15px 0px;
    color: #ffffff;
    font-size: 20px;
    display: inline-block;
}

Here is the proper Angular 10 copy to clipboard demo that you will see in the browser.

Copy to Clipboard in Angular

The Bottom Line

Copy to clipboard tutorial is over; in this tutorial, we saw how to use the ngx-clipboard package to copy content from clipboard in an Angular application. I hope you loved this tutorial and share it with others.