Angular 16 Copy to Clipboard Tutorial Example

In this tutorial, you will learn how to use ngx-clipboard to implement the “Copy to Clipboard” functionality in Angular 16.

ngx-clipboard is a library that allows you to easily copy text to the clipboard using Angular. To get started, you’ll need to have an Angular project set up. If you haven’t set up an Angular project yet, you can do so using the Angular CLI.

Angular 16 Copy to Clipboard Tutorial Example

Steps to implement the “Copy to Clipboard” functionality in angular using ngx-clipboard:

• Step 1: Set up your Angular project
• Step 2: Install ngx-clipboard
• Step 3: Import and configure ngx-clipboard
• 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

Step 1: Set up your Angular project

Open your cmd or command prompt and execute the following command into it to install and create a new Angular project:

ng new ngx-clipboard-demo
cd ngx-clipboard-demo

Step 2: Install ngx-clipboard

Next, you need to execute the following command on cmd to install the ngx-clipboard in the angular app:

npm install ngx-clipboard

Step 3: Import and configure ngx-clipboard

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

Step 4 – Create Copy Text to Clipboard in Angular

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

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

Step 5 – Copy Form Input Text

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

<input type="text" #formInputText />

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

Step 6 – Copy Text with Click Event

If you need to copy inline text; subsequently, you can use the following 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)
  }
}

Step 7 – Start Angular App

Finally, you can run your Angular application and test the “Copy to Clipboard” functionality:

ng serve

Visit http://localhost:4200 in your browser and click the “Copy Text” button. The specified text should be copied to your clipboard, and you should see the success message in the console.

Conclusion

That’s it! You’ve now implemented the “Copy to Clipboard” functionality in your Angular application using ngx-clipboard.

Recommended Angular Tutorials