Tag

Angular

Browsing

Hoy les traigo ¿Cómo aplicar una regla CSS solo para Google Chrome? , no se si les ha pasado que están trabajando en un nuevo diseño , abren Mozilla Firefox y se ve perfecto, luego abres Google Chrome y ves que esa nueva implementación no funciona. Esta situación me sucedió el día de ayer tratando de configurar ngx-perfect-scrollbar, la cual muestra una barra de desplazamiento ( Scroll Bar ) al contenedor que se lo apliques,…

Buenas tardes, en esta oportunidad les raigo un tutorial de como animar nuestras rutas en Angular, y así darle mayor vistosidad a nuestra UI, manos a la obra: Lo primero que haremos sera crear nuestra app con el CLI de angular: Una vez creada nuestra aplicación procedemos a abrirla con nuestro editor de texto favorito, en mi caso WebStorm, nos dirigimos al app.module.ts e importamos el brwoserAnimationsModule de la siguiente manera: Luego de importado se…

En esta oportunidad les traigo como obtener su ubicación (latitud y longitud ) en angular de manera sencilla. Esto es importante si estas trabajando con mapas y necesitas mostrar la ubicación de un cliente o un usuario. Pues bien el código es súper simple y sencillo, nos basamos en una promesa para obtener las coordenadas de la siguiente manera: creamos un servicio llamado location.service.ts – Agregamos el siguiente código al servicio – Una vez agregado…

En esta ocasión les traigo un tutorial de como encriptar nuestras variables en localstorage , con la ayuda de unos paquetes NPM. Lo primero es crear una nueva aplicación angular: Luego procedemos a instalar los siguientes paquetes que vamos a utilizar : npm install crypto-js –save npm install secure-web-storage npm install @types/crypto-js –save-dev npm install –save @types/node Procedemos a instalar estos paquetes desde nuestra terminal Una vez instalados editamos dos archivos y agregamos el…

Los <mat-button-toggle> se pueden activar y desactivar y tienen la apariencia de un botón. Estos pueden ser configurados para que se comporten como botones de selección o como checkbox. Veamos los pasos para crear estos botones. PASO 1 procedemos a crear un proyecto nuevo de angular y le instalamos material design , puedes seguir estos tutoriales para agregarlo Configura Angular Material de manera sencilla usando un instalador ó Incluir Angular Material en tus proyectos una…

Buenos días, luego de tener que instalar Angular Material en cada uno de mis proyectos, me propuse a crear un Bash que me automatizara todo el proceso de instalación. El proceso es muy sencillo, solo debes ejecutar el instalador dentro de tu proyecto y seleccionar la versión de Angular con la cual estas trabajando y dejar que el instalador haga su trabajo mientras puedes ir por una taza de café. Al finalizar el instalador tendrás…

Buenas tardes, he estado desarrollando una funcionalidad que no traen las tablas de material angular por defecto, un cliente me solicitó poder cambiarle el nombre a las columnas de la tabla, así como poder organizarlas de un lado al otro y poder mostrarlas y ocultarlas dependiendo de sus necesidades. He creado una tabla usando el material design para angular ,  así como funcionalidades como el drag and drop del CDK. El proceso de creación  ha…

Casi siempre como programadores Javascript usamos console.log para hacer debug en nuestras aplicaciones. Muchas veces olvidamos eliminarlas de nuestro código y vemos como al abrir el inpeccionador de código vemos en la consola un montón de estos mensajes, los cuales simplemente son de utilidad cuando estamos desarrollando la aplicación. Pues bien cuando estamos desarrollando una aplicación angular podemos eliminar estos mensajes de una manera automática al construirla para un entorno de producción de la siguiente…

En esta oportunidad les traigo una actualización de mi post anterior en el cual les mostraba como instalar y configurar esta fantástica librería en su versión 4.7. Veamos como configurarla: Paso 1 Instalamos la librería: Antes de instalar la libreria les recomiendo que escojan la versión adecuada a su versión de angular para que todo funcione de manera correcta: en mi caso uso angular 8 por lo cual debo instalar Tabla de compatibilidad @fortawesome/angular-fontawesome Angular…

Para instalar fontawesome 4.7 en angular y poder disfrutar de esta excelente librería de íconos en nuestros proyectos web, realizaremos los siguientes pasos : Paso 1 Instalamos los paquetes Paso 2 Importamos el modulo Paso 3 Importamos el archivo font-awesome.css en nuestro angular.json en la sección de estilos de la siguiente manera: Puedes descargar el código fuente de este ejemplo desde mi github aquí