copyToClipboard

Paquete: @tiendana/ngx-core/ui

Directiva que copia texto al portapapeles al hacer clic en el elemento. Usa copyTextToClipboard de @tiendana/utils para soporte cross-browser.

Características

✅ Copia automática al hacer clic
✅ Evento copied para feedback visual
✅ Soporte para texto simple y JSON
✅ Usa Clipboard API moderna

API

Inputs

Input	Tipo	Descripción
copyToClipboard	InputSignal<string | null | undefined>	Texto a copiar al portapapeles. Es el alias de la propiedad interna valToCopy y es obligatorio

Outputs

Output	Tipo	Descripción
copied	OutputEmitterRef<string>	Emite el valor del input cuando termina copyTextToClipboard. También emite si no se copió nada (valor vacío o null, o sin Clipboard API), y en ese caso puede emitir null

Snackbar integrado

Al copiar, @tiendana/utils muestra el snackbar «Copiado al portapapeles»; no dupliques el aviso en (copied).

Ejemplos y Demos

Copiar Texto Simple

Cargando demo...

Ver código

Copiar JSON

Cargando demo...

Ver código

Implementación Interna

import { Directive, HostListener, input, output } from '@angular/core';
import { copyTextToClipboard } from '@tiendana/utils';

@Directive({ 
  selector: '[copyToClipboard]' 
})
export class CopyToClipboardDirective {
  valToCopy = input.required<string | null | undefined>({ alias: 'copyToClipboard' });
  copied = output<string>();

  @HostListener('click')
  async onClick() {
    await copyTextToClipboard(this.valToCopy());
    this.copied.emit(this.valToCopy() as string);
  }
}

Uso Típico

Ideal para:

• Copiar códigos de referencia
• Copiar tokens de API
• Copiar JSON de configuración
• Copiar enlaces compartibles
• Copiar datos estructurados

Accesibilidad

• Usa aria-label="Copiar al portapapeles" en el botón
• Proporciona feedback visual después de copiar
• Considera agregar texto descriptivo del contenido