Cómo copiar un texto al portapapeles (Clipboard) con Angular

En este artículo vamos a enseñar cómo copiar un texto al portapapeles o clipboard con Angular. Nos puede servir para que el usuario pueda copiar cualquier texto en su portapapeles para utilizarlo luego, por ejemplo utilizando un botón.

En primer lugar decir que no tenemos que instalar nada más específico ya que el propio framework de Angular provee de un servicio que se puede utilizar fácilmente llamado Clipboard.

En primer lugar importaremos el servicio Clipboard a nuestro fichero typescript:

import { Clipboard } from '@angular/cdk/clipboard';

Y añadiremos la propiedad clipboard al constructor del componente:

constructor(private clipboard: Clipboard) {}

Luego, crearemos un botón con una función en onclick para copiar el texto dentro del archivo html:

<button (click)="copiar()">Clicka aquí para copiar</button>

En tercer lugar, crearemos la función copiar en el archivo typescript utilizando la propiedad creada anteriormente llamando al método copy y asignándole el texto que queremos copiar:

copiar() {
    this.clipboard.copy('Texto a copiar');
  }

Con esto ya estaría y al clickar en el botón tendríamos el texto en el portapapeles y lo podríamos pegar en cualquier sitio.

Para nuestro ejemplo, hemos añadido un input para que se pueda añadir el texto que luego al clickar en el botón será copiado al portapapeles. Así quedaría el input en la parte html:

<input type="text" class="form-control" id="textoACopiar" 
  required
  [(ngModel)]="textoACopiar" />

Y la parte typescript de la siguiente forma:

constructor(private clipboard: Clipboard) {}

  title = 'Ejemplo de copia de copiar un texto en el portapapeles';
  textoACopiar = ''


  copiar() {
    this.clipboard.copy(this.textoACopiar || 'No hay texto');
  }

Con esto ya lo tendríamos.

Os dejo el ejemplo para que lo probéis: https://bitacoraweb.info/code/angular-copy-clipboard/

Para más documentación sobre el Clipboard de Angular, podéis consultar la documentación de la API: https://material.angular.io/cdk/clipboard/api

Aquí os podéis descargar el código del ejemplo:

Espero que te sirva, si es así comparte.

Alex Martínez Herrera

Especialista en Diseño y Desarrollo Web para Startups, PYMEs y Proyectos Personales | Experto en WordPress & Optimización SEO | Ayudo a autónomos y PYMEs a crecer su negocio.