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 sido el siguiente: 1. La …
Blog Posts
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 manera: Paso 1 : Creamos …
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 0.1.x 5.x 0.2.x 6.x 0.3.x …
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í
En esta oprtunidad les traigo como utilizar yarn para instalar los paquetes de manera offline y asi ahorrar tiempo manteniendo un repositorio offline. Lo primero que debmos tener instalado en nuestro sistema es yarn y lo hacemos de la siguiente manera: Una vez instalado verificamos la instalación con el siguiente comando: Una vez instalado yarn procedemos a configurar un directorio de nuestro PC como repositorio offline, lo podemos hacer en nuestro home si queremos compartirlo con todos nuestros proyectos. …
Continuamos con la serie de tutoriales de angular material, en esta oportunidad les traigo como crear tabs para organizar el contenido de su aplicación Web. Los pasos son muy sencillos , lo primero que debemos hacer es seguir el tutorial de como integrar angular material a nuestros proyectos, el cual lo puedes leer aquí. Empezamos creando nuestra app : Una vez tengamos nuestro proyecto creado y hayamos instalado angular material , procedemos a incluir en nuestro material.module.ts lo siguiente: …
Como sabemos, en Angular se usan mucho los observables, dada su utilidad y versatilidad, aunque hemos de admitir que no es una tarea sencilla de aprender inicialmente. Tener una aplicación con un alto consumo de memoria es uno de los peores problemas que se puede tener. Es difícil de encontrar, difícil de depurar y, a menudo, difícil de resolver. Desafortunadamente, este problema ocurre en todos los lenguajes de programación incluyendo Angular. Los observables son impresionantes, debido al incesante flujo de …
Muchas veces nos ha tocado verificar si cierto elemento existe dentro de un array en nuestro proyectos de Angular, pues bien en esta oportunidad les traigo una manera sencilla de hacerlo. La función que utilizaremos es includes(), la cual nos retorna true or false dependiendo del caso. Se usa de la siguiente manera: Veamos un video ilustrativo del uso de esta función Puedes descargar el código fuente desde aquí Hasta la próxima!
En esta oportunidad vamos a agregar a nuestro proyecto de angular , la librería de Bootstrap para ayudarnos con la maquetación de nuestra aplicación: procedemos a realizar lo siguiente: luego de generar nuestra app abrimos localhost:4200 y comprobamos que todo este funcionando perfectamente: ejecutar en nuestra terminal dentro del proyecto, instalamos jquery y popper ya que bootstrap depende de ellos : bien abrimos nuestra aplicación con nuestro editor de preferencia y vamos a editar el archivo angular.json para agregar la …
En esta ocasión les traigo como construir un paso a paso (MatStepper) para nuestros proyectos usando la librería angular material. El paso a paso de Angular Material(MatStepper) proporciona un flujo de trabajo similar al de un instalador, al dividir el contenido en pasos lógicos. Bien vamos a crear nuestro primer paso a paso: 1. Procedemos a crear nuestra aplicacion de ejemplo: Una vez creado nuestro proyecto procedemos a abrirlo usando nuestro editor de código de preferencia, en mi caso uso …
Social Profiles