Angular-Material

Hoy vengo a presentar un software de comercio electrónico, tienda online o e-commerce escrito en Angular, con los estilos de Angular Material, y con una API escrita con JavaScript del lado del servidor usando Node con Express. Para la base de datos se ha usado MySQL. El software es open source; puede ser descargado y modificado por cualquier persona. Entre sus características encontramos: Gestión de productos Fotos de productos (guardadas en el disco duro) Carrito de compras por cada usuario Registro de venta con dirección de envío Vista de tienda Detalle de producto Quiero aclarar que no es un software listo para producción, y más bien es un proyecto escolar que puede servir ya sea como base para un proyecto completo de un e-commerce o para otro proyecto escolar. Veamos ahora cómo es que está programado, en dónde se puede descargar. etcétera. ...

En este post te mostraré cómo lanzar o mostrar un Snackbar en Angular Material, es decir, el paquete que combina los estilos Material Design para el framework Angular. ...

En este post te mostraré cómo navegar a otra ruta en una SPA de Angular usando TypeScript. Es decir, navegar en el click de un botón o en determinada acción, y no a través de un enlace. Lo único que tenemos que hacer es importar al router, inyectarlo en el constructor y después invocar a navigateByUrl (igualmente el router tiene más métodos). ...

Resumen: en este post te mostraré cómo consumir una base de datos de MySQL con Angular, usando PHP como lenguaje de servidor y AJAX (con el módulo HttpClient de Angular) para enviar los datos. Para los estilos vamos a usar Angular Material. Puedes ver el código en GitHub y una demostración con su explicación en el siguiente vídeo: ...

Resumen: utilizar el componente MatDialog de Angular Material para mostrar un diálogo de confirmación, y de la misma manera ejemplificar cómo usar diálogos en Angular utilizando componentes y plantillas personalizadas. Al final vamos a tener un ejemplo de un diálogo de confirmación con Material Design en donde podremos saber si el usuario hizo click en Sí o en No. Mira el resultado final aquí. ...

Resumen: mostrar cómo crear un menú de navegación con Angular Material; es decir, implementar un navigation drawer con el menú a la izquierda (que se puede ocultar y mostrar con un botón) y el contenido a la derecha. Para implementar un navigation drawer o cajón de navegación en Angular Material vamos a usar combinar algunos componentes. Entre ellos: Mat Toolbar: la barra que estará en la parte superior y tendrá el título de la app de Angular así como un botón para mostrar/ocultar el cajón de navegación Mat Sidenav Container: el contenedor de lo que veremos a continuación Mat Sidenav: el menú con los enlaces, es decir, el cajón de navegación Mat Sidenav Content: el contenido que se irá mostrando e inyectando dependiendo de la sección Nota: recuerda que para esto debes tener un proyecto de Angular y haberle agregado Angular Material. Si quieres ver el ejemplo terminado haz click aquí. ...

En este post te muestro cómo agregar y utilizar los estilos de Material Design o Angular Material a una aplicación de Angular. Vamos a ver cómo: Agregar @angular/material a proyecto Utilizar un tema presideñado Configurar componente contenedor Usar algunos componentes Nota: para esto necesitas un proyecto existente. Si no lo tienes, mira aquí cómo comenzar con Angular. ...