Angular 16 Copy to Clipboard Tutorial with Example

Angular 16 Copy to Clipboard tutorial; Through this tutorial, i am going to show you how to make a copy to Clipboard feature using the ngx-clipboard package in Angular 16 apps.

Angular 16 Copy to Clipboard Tutorial with Example

Use the following steps to create copy text to Clipboard in Angular apps; as follows:

  • 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

Step 1 – Install Angular Project

Run the following command on command prompt to install angular app; as follows:

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

Step 2 – Add ngx-clipboard Pacakage

Then run the following command on command prompt to install the ngx-clipboard in the angular app:

npm install ngx-clipboard

Step 3 – Register ClipboardModule in App Module

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

Step 5 – 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>

Step 6 – Copy Text with Click Event

So far, you 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)
  }
}

Step 7 – 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 successfully learned about ngx-clipboard package and how to integrate it into the angular ecosystem.

Related Tutorials

Leave a Comment