copiar texto a clipboard en angular automáticamente

Para copiar texto a clipboard o al portapapeles desde angular tenemos que usar execCommand, que es una api de js que no necesita permisos.

En angular no tenemos nativamente con ts algo parecido así que vamos a usar un poco de javascript nativo en nuestro código.

Copiando una llamada json

Para este ejemplo de copiar texto a clipboard vamos a hacer una llamada api rest y está llamada vamos a copiarlo al portapapeles directo

funciones en typescript

Antes de poner el código explicare un poco sobre esta api, podemos usar los comandos siguientes en execCommand

• copy
• paste
• cut

Lo único que necesitamos es una sección de texto ya sea un textarea o un input, luego se selecciona y aplicamos el comando

var copyText = document.querySelector("#input");
  copyText.select();
  document.execCommand("copy");

en caso de Angular vamos a crear un elemento nuevo y luego borrarlo se vería de la siguiente manera

copyText(val: string){
    let selBox = document.createElement('textarea');
      selBox.style.position = 'fixed';
      selBox.style.left = '0';
      selBox.style.top = '0';
      selBox.style.opacity = '0';
      selBox.value = val;
      document.body.appendChild(selBox);
      selBox.focus();
      selBox.select();
      document.execCommand('copy');
      document.body.removeChild(selBox);
      this.copy = true;
      setTimeout(()=>{
        this.copy = false;
      }, 2000)
    }

con esto ya podemos pasar cual texto a copiar en portapapeles

al final de post pongo la página en vivo, ahora todo el código :

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ConsultasService } from './consultas.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  respuesta: string;
  copy: boolean;
  @ViewChild('urls', {static: false}) laurl: ElementRef;
  constructor(private servicio: ConsultasService){

  }
  ngOnInit() {
    
  }
  getConsultas(){
    let xxx = this.laurl.nativeElement.value;
    if(xxx.indexOf('http') != -1){
      this.servicio.getListas(this.laurl.nativeElement.value).subscribe(x => {
        this.respuesta = JSON.stringify(x);
        this.copyText(JSON.stringify(x));
      }, error =>{
        this.respuesta = 'Algo salio mal'
        this.copy = false;
      })

    }else {
      alert ('llenar con el formato correcto, abre consola para ejemplo');
      console.log('debe contener http o https por ejemplo https://www.mocky.io/v2/5185415ba171ea3a00704eed');

    }

  }
  copyText(val: string){
    let selBox = document.createElement('textarea');
      selBox.style.position = 'fixed';
      selBox.style.left = '0';
      selBox.style.top = '0';
      selBox.style.opacity = '0';
      selBox.value = val;
      document.body.appendChild(selBox);
      selBox.focus();
      selBox.select();
      document.execCommand('copy');
      document.body.removeChild(selBox);
      this.copy = true;
      setTimeout(()=>{
        this.copy = false;
      }, 2000)
    }
  
}

app component html

<div class="cabeza">
    <h1>Copiar llamadas de api rest a portapapeles </h1>
</div>
<section>
    <div class="url">
        <p>Inserte url completa</p>
        <div>
            <input type="text" #urls placeholder="http://llamada.com/pruebarestjson" />
            <button (click)="getConsultas()">Consultar</button>
        </div>


    </div>
    <div *ngIf="respuesta != null" class="respuesta">
        <div *ngIf="copy">
            <p>Copiado en clipboard</p>
        </div>
        <p>{{respuesta}}</p>
    </div>



</section>

style app component

.cabeza {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 50px;
}

textarea {
    width: 100%;
    height: auto;
    background-color: transparent;
    resize: none;
}

section {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.url {
    width: 40%;
    display: flex;
    flex-direction: column;
}

.url input {
    border: 0;
    border-bottom: 1px solid white;
    background-color: transparent;
    color: white;
    width: 70%;
    height: 30px;
}

.url input:focus {
    outline: 0;
}

button {
    cursor: pointer;
}

.respuesta {
    overflow: auto;
    width: 50%;
    border: 1px solid black;
    padding: 2px;
    background-color: rgba(255, 255, 255, 0.3);
    color: black;
}

Servicios

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class ConsultasService {

  constructor(private api: HttpClient) { }
  getListas(url: string): Observable <any>{
    //let domain = window.location.hostname;
    return this.api.get(url)
  }
}

Código en vivo para copiar texto a clipboard

Si estás interesado en saber mas de Angular te recomiendo esta sección del blog.

También te invitamos a entrar en nuestro canal de telegram.