Angular 14 Copy to Clipboard Example Tutorial

Angular 14 Copy to Clipboard tutorial; throughout this tutorial, you will learn how to create a copy to Clipboard feature using the ngx-clipboard package in angular 14 apps.

Angular 14 Copy to Clipboard Example Tutorial

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

Execute the following command on terminal 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 install the ngx-clipboard in the angular app, hence execute the command recklessly:

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, 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)
  }
}

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.

Recommended Angular Tutorials