Create Copy to Clipboard in Angular 16 with ngx-clipboard

Last Updated on by in Angular

This is a comprehensive tutorial; in this tutorial, we will learn how to integrate Copy to Clipboard functionality in Angular 13 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

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 { AppComponent } from './app.component';

import { ClipboardModule } from 'ngx-clipboard';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, 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.scss'],
})

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:any) {
    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;
}

Execute the following command to start the application.

ng serve --open

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

Copy to Clipboard in Angular

The Bottom Line

The ngx-clipboard is a library for Angular applications that offers a simple and direct way to work with the clipboard.

It lets you easily copy text or HTML content to the clipboard and keep an eye for clipboard events such as copy or cut.

With the help of ngx-clipboard, you can integrate features like copying text to the clipboard with just a few lines of code.

It is useful for scenarios such as sharing text snippets, generating dynamic content, or enhancing the user experience by providing a quick way to copy data.

In this tutorial, we saw how to use the ngx-clipboard package to copy content from clipboard in an Angular application.

Copy to clipboard tutorial is over.

I hope you loved this tutorial and share it with others.