Categories: Angular

How To Copy Text On Clipboard Using Angular

In this article, we will figure out how to copy the content to our clipboard and furthermore duplicate the current date and time, using Angular 11.

Using this article copy any data on the clipboard and past it anywhere. so let’s see the below example and copy text, date, time to our textarea.

So, let’s see below example from here:

Step 1: Create an Angular application using this command

ng new copyData

Step 2: Add the below code in your styles.scss file

@import '~bootstrap/dist/css/bootstrap.min.css';

Step 3: Add the following command in your app.component.ts file

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-copy-clipboard',
  templateUrl: './copy-clipboard.component.html',
  styleUrls: ['./copy-clipboard.component.scss']
})
export class AppComponent {
  todaysDate: Date = new Date();  
    textMessage:any;  
    msgHideAndShow:boolean=false;  
    constructor() {  
      setInterval(() => {  
        this.todaysDate = new Date(); 
      }, 1);  
    }  
    textMessageFunc(msgText: any){  
      this.textMessage=msgText+" Copied to Clipboard";  
      this.msgHideAndShow=true; 
      setTimeout(() => {  
        this.textMessage="";  
        this.msgHideAndShow=false;  
      }, 1000); 
    }  
    copyInputMessage(inputElement: any) {  
      inputElement.select();  
      document.execCommand('copy');  
      inputElement.setSelectionRange(0, 0);  
      this.textMessageFunc('Text');  
    }  
    copyTodaysDate(date: any) {  
      date.select();  
      document.execCommand('copy');  
      date.setSelectionRange(0, 0);  
      this.textMessageFunc('Date');
    }  
    copyCurrentTime(time: any) {  
      time.select();  
      document.execCommand('copy');  
      time.setSelectionRange(0, 0); 
      this.textMessageFunc('Time'); 
    }  

}

Step 4: Add the following command to your app. component.html file

<div class="card"> 
      <div class="card-body pb-0">  
        <div class="row">  
          <div class="col-2 col-md-12">  
            <div class="card">  
              <div class="card-header">  
                <label>Copy Text To Clipboard </label> 
              </div>  
              <div>  
                <textarea readonly style="margin-left: 317px;text-align: center;" #date>{{todaysDate | date:'dd/MM/yyyy'}}</textarea>  
                <textarea readonly style="margin-left: 317px; text-align: center;" #time>{{todaysDate | date:'HH:mm:ss'}}</textarea>  
              </div> 
              <div class="card-body">  
                <div class="center-form">  
                  <div class="row">  
                    <div class="col-6 col-md-6">  
                      <div class="form-group">  
                        <h5>Type To Copy</h5>  
                        <textarea #userinput placeholder="Enter text to be copied"  
                          style="height: 167px;width: 500px;"></textarea>  
                      </div>  
                    </div>  
                    <div class="col-6 col-md-6">  
                      <div class="form-group">  
                        <h5>Paste</h5>  
                        <textarea placeholder="Paste copied text" style="height: 167px;width: 500px;"></textarea>  
                      </div>  
                    </div>  
                    <div class="col-12 col-md-12 text-center">  
                      <button type="button" style="margin-right:5px" (click)="copyInputMessage(userinput)"  
                        class="btn btn-primary">Copy to  
                        Clipboard</button>  
                      <button type="button" style="margin-right:5px" (click)="copyTodaysDate(date)"  
                        class="btn btn-danger">Copy  
                        Today's Date</button>  
                      <button type="button" style="margin-right:5px" (click)="copyCurrentTime(time)"  
                        class="btn btn-success">Copy  
                        Current Time</button>  
                        <label *ngIf="msgHideAndShow" style="float: right;">{{textMessage}}</label>  
                    </div>  
                  </div>  
                </div>  
              </div>  
            </div>  
          </div>  
        </div>  
      </div>  
    </div>