Presentamos ngxsmk-tel-input, un componente UI ligero y moderno para Angular que ofrece entrada de teléfono internacional con banderas, desplegable de países y validacion y formateo reales siguiendo el formato E.164
El componente integra la experiencia visual de intl-tel-input y la validacion y parseo de libphonenumber-js, exponiendo una API limpia para Angular compatible con formularios reactivos y basados en plantillas mediante ControlValueAccessor
Salida de valor: por defecto emite numeros en formato E.164, por ejemplo +14155550123 cuando el numero es valido, y null cuando esta vacio o invalido. Soporta SSR y carga intl-tel-input solo en el navegador
Caracteristicas principales: compatibilidad con Angular 17 a 19, componente standalone, opciones como separateDialCode, nationalMode, preferredCountries, attachment del dropdown a un contenedor personalizado, tamanos, variantes, boton de limpiar, autofocus y seleccion al enfocar
Localizacion e idioma: permite personalizar etiquetas del desplegable, textos de busqueda, nombres de paises y direccion RTL. Dirigir la UI a la derecha a la izquierda es tan simple como aplicar dir igual a rtl en el contenedor
Modo solo digitos: opcion para prohibir caracteres no numericos y permitir opcionalmente un unico mas inicial. Esto filtra mecanografiado y pegado y mantiene las actualizaciones programaticas limpias, mientras que la validacion sigue usando libphonenumber-js
Temas: personalizacion via variables CSS para bordes, color del anillo, radio de esquina, y estilos para items del desplegable. Compatible con modos oscuros si se usan clases de tema en el contenedor padre
Instalacion basica: ejecutar npm i ngxsmk-tel-input intl-tel-input libphonenumber-js. Agregar el CSS de intl-tel-input en la aplicacion y copiar los assets de banderas a assets/intl-tel-input/img para que las banderas se muestren correctamente
Notas de integracion: actualizar angular.json para incluir node_modules/intl-tel-input/build/css/intlTelInput.css en estilos y copiar node_modules/intl-tel-input/build/img al directorio assets/intl-tel-input/img. Reiniciar el servidor de desarrollo despues de los cambios
SSR y rendimiento: el componente detecta el entorno y solo carga las dependencias del navegador cuando corresponde, evitando errores de acceso a window en el servidor y manteniendo tiempos de carga optimizados
Solucion de problemas comun: si el desplegable aparece sin estilos o faltan banderas, verificar inclusion de estilos y assets en angular.json y la ruta assets/intl-tel-input/img; si hay conflictos de dependencias, revisar que las versiones de @angular esten en el rango 17 a 19; si no se puede importar en un workspace, construir la libreria localmente o instalar desde un tarball
Recursos: npm https://www.npmjs.com/package/ngxsmk-tel-input y GitHub https://github.com/toozuuu/ngxsmk-tel-input
Roadmap: mejoras de accesibilidad y mas ejemplos y presets, demos en StackBlitz y apertura a solicitudes de la comunidad. PRs, issues e ideas son bienvenidos
Sobre Q2BSTUDIO: somos Q2BSTUDIO, empresa de desarrollo de software y aplicaciones a medida especializada en soluciones tecnicas avanzadas. Ofrecemos software a medida, aplicaciones a medida y servicios integrales que incluyen inteligencia artificial, ia para empresas, agentes IA y soluciones de power bi para analitica y visualizacion
Nuestras capacidades abarcan ciberseguridad para proteger aplicaciones y datos, servicios cloud aws y azure para desplegar soluciones escalables, y servicios inteligencia de negocio para transformar datos en decisiones accionables. Implementamos proyectos con modelos de inteligencia artificial para automatizar procesos, mejorar experiencia de usuario y potenciar resultados
Si buscas integrar una entrada telefonica internacional robusta en tu aplicacion Angular o necesitas una solucion a medida que combine IA, seguridad y cloud, en Q2BSTUDIO podemos ayudarte desde el diseno hasta la puesta en produccion. Contacta con nosotros para evaluar tu proyecto y recibir una propuesta personalizada
Palabras clave para posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi
Si pruebas ngxsmk-tel-input con nosotros o necesitas asistencia para integrarlo en soluciones empresariales, estaremos encantados de colaborar y recoger tu feedback. Feliz desarrollo
.jpg)
