Angular 11 Copy to Clipboard Example Tutorial

Angular 11 Copy to Clipboard tutorial, throughout this extensive tutorial, you will discover how to create a copy to Clipboard feature using the ngx-clipboard package.

This angular copy to clipboard example will show you how to copy content by clicking on the copy text button; this tutorial will use a third party plugin ngx-clipboard.

Using ngx clipboard, you can quickly implement Copy to Clipboard functionality in any user interface UI elements.

We will add the id using the # tag in angular HTML element, similarly declare the button tag and define the ngxClipboard directive provided by the npm angular copy to clipboard plugin. This can also be invoked by creating a custom function that you have to attach to click event.

Angular 11 Copy to Clipboard Example

Here are the steps that are necessary for building copy text to Clipboard in Angular:

  • Step 1: Install Angular Project
  • Step 2: Add ngx-clipboard Pacakage
  • Step 3: Register ClipboardModule
    in App Module
  • Step 4: Create Copy Text to Clipboard in Angular
  • Step 5: Copy Form Input Text
  • Step 6: Copy Text with Click Event
  • Step 7: Start Angular App

Install Angular Project

Theoretically, Angular CLI is the ideal tool for angular development, run the recommended code to set up this tool on your machine:

npm install -g @angular/cli

Let’s move to the second step and install the angular app:

ng new angular-test-app

Get into the app’s root:

cd angular-test-app

Add ngx-clipboard Pacakage

This step explains about installing the ngx-clipboard in the angular app, hence execute the command recklessly:

npm install ngx-clipboard

Register ClipboardModule in App Module

Ideally, you have to import ClipboardModule from ‘ngx-clipboard’ package, additionally register this module into the imports array in app.module.ts file:

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

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 { }

Create Copy Text to Clipboard in Angular

The ngxClipboard directive and [cbContent] tag combined inserted in button tag wrapped around a container id, and this code example allows you to copy inline text. Place the code in angular HTML template:

<div #container>
  <button ngxClipboard [cbContent]="'CTC Inline Text.'" [container]="container">Copy Content</button>
</div>

Copy Form Input Text

Sometimes you might need to copy the form input control text entered by some user, fret not you can tackle that also. Declare some id onto input control, pass the same id to the [ngxClipboard]=”” directive.

<input type="text" #formInputText />

<button [ngxClipboard]="formInputText">Copy Data</button>

Copy Text with Click Event

So far, we have seen to copy inline text; subsequently, we will see how to copy to clipboard with click event and pass the dynamic values for CTC.

<button (click)="copyText()">Copy Text</button>

Head over to the typescript template, import ClipboardService from ‘ngx-clipboard’ package, and inject the module into the constructor method. Access copyFromContent() method and pass the value dynamically within the method.

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 {
  
  content = 'Hello, i am tiny text and copied from somewhere else :)';

  constructor(
    private clipboardApi: ClipboardService
  ) { }

  copyText() {
    this.clipboardApi.copyFromContent(this.content)
  }
}

Start Angular App

To test the feature, you need to start the app. Hence, head over to terminal and execute the suggested command:

ng serve

Open the demo app on the following url:

http://localhost:4200

Conclusion

Finally, you have got the step by step answer related to integrating copy to clipboard in angular. You have successfully learned about ngx-clipboard package and how to integrate it into the angular ecosystem.