Migrar ngClipboard / angular-clipboard a Angular moderno
ngClipboard y angular-clipboard copiaban texto al portapapeles desde una directiva, sobre clipboard.js o document.execCommand. Están atadas a AngularJS.
Qué la reemplaza
| Opción | Cuándo elegirla |
|---|---|
| Angular CDK Clipboard | Oficial: la directiva cdkCopyToClipboard y un servicio Clipboard. |
| navigator.clipboard | La API nativa asíncrona, cuando no quieres dependencias o necesitas leer el portapapeles. |
Cómo migrarla
- Encuentra cada botón de copiar y qué copia: un valor fijo, un valor del modelo o el contenido de un elemento.
- Reemplaza la directiva por cdkCopyToClipboard y usa su evento de copiado para dar feedback.
- Para texto que se arma con una respuesta del servidor, usa el servicio Clipboard o navigator.clipboard y maneja el caso de fallo.
Cuidado con. La API nativa del portapapeles solo funciona en HTTPS o localhost y espera un gesto del usuario. Copiar después de esperar una petición puede ser rechazado en algunos navegadores, así que obtén el texto antes del clic cuando puedas.
Otras librerías
¿Planeas una migración o una plataforma de microfrontends?
En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.
Escríbeme por LinkedIn