Angular 13 Copy to Clipboard Example Tutorial

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

Angular 13 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.

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.

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:Open the demo app on the following url:

http://localhost:4200

Conclusion

Finally, We have successfully learned about ngx-clipboard package and how to integrate it into the angular ecosystem.