Angular 12 copy to clipboard example

There are so many JavaScript plugin available to Copy text from div or input box. Copy to clipboard is useful copy links, coupons, code, or password. This way, users don't need to type text or select and copy. User only need to click copy button only. This gives user smooth experience.

In this tutorial, we will implement copy to clipboard feature into Angular project. We will go through step by step from the scratch. The tutorial follows below steps:

We assume that you have already installed all required packages and complete Angular environment setup. If you want to learn how to setup Angular environment, you can follow this article.

  • Step 1: Create new Angular application
  • Step 2: Install ngx-clipboard module
  • Step 3: Import ClipboardModule in App Module
  • Step 4: Use ngxClipboard directive into HTML
  • Step 5: Start Angular server and test

So let's start from creating new Angular application.

Step 1: Create new Angular application

After installed Angular CLI package, we can create new Angular application using following ng command into Terminal or Command Prompt.

ng new clipboard

It will ask few questions like install router module, default stylesheet etc. You can give answer according to your requirement. Next change Terminal's working directory to application root.

cd clipboard

Step 2: Install ngx-clipboard module

In this step, we will install ngx-clipboard package using npm. This will provide clipboard directive which helps to copy and paste the text into Angular application.

npm install ngx-clipboard --save

Step 3: Import ClipboardModule in App Module

After we installed ngx-clipboard module, we need to import ClipboardModule in AppModule. Open app.module.ts file and import ClipboardModule and also add in imports array.

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: Use ngxClipboard directive into HTML

There are several ways to copy text. We will see input box and using ClipboardService method. You can refer official site to learn more ways.

Copy text from textbox

Now we are ready to use ngxClipboard directive into HTML template. We will create input box and pass its value to ngxClipboard directive. Open app.component.html file from app directory and change HTML code to below.

<!doctype html>
<html>
  <head>
    <title>Copy to clipboard</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container" #container>
      <div class="mt-3">
        <div class="mb-3">
          <label for="text" class="form-label">Copy to Clipboard</label>
          <input type="text" #text class="form-control w-25" placeholder="Text message">
        </div>
      </div>
      <button class="btn btn-primary" [ngxClipboard]="text">Copy text</button>
    </div>
  </body>
</html>

Copy using ClipboardService for dynamic copy data

If you want to copy dynamic data from the component class. You need to use copy() method from ClipboardService class. Open app.component.ts and import ClipboardService. You will also need to create instance of the class.

import { Component } from '@angular/core';
import { ClipboardService } from 'ngx-clipboard';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'This texst will be copied';
  constructor(private clipboardService: ClipboardService) { }

  copyText() {
    this.clipboardService.copyFromContent(this.title)
  }
}

We have also created copyText() method which will call on button click. In the app.component.html file, create a button with click event. The button will trigger copyText() method from component.

<!doctype html>
<html>
  <body>
    <div class="container m-3">
      <button (click)="copyText()">Copy text</button>
    </div>
  </body>
</html>

Step 5: Start Angular server and test

That's it. Now run Angular server using below ng command into Terminal.

ng serve --open

This will start Angular server and open http://localhost:4200/ url into default browser. Now type into text box and click Copy button. This will copy text from the input box.

Conclusion

In this article, we have used ngx-clipboard module and used it to copy text from input box or from the component. I hope you have liked this article.

Tags:

Was this article helpful?

0 out of 0 person found this article helpful.

Leave a comment

Or

No Comment