css Framework Angular web
Angular cambia la opacidad en CSS
Hoy te voy a mostrar cómo solucionar el siguiente problema: al preparar aplicación web de angular para producción con ng build --prod los estilos CSS se cambian y en la opacidad se obtienen distintos resultados.
Quiero aclarar que esto no es problema de Angular, sino de cssnano, una herramienta que utiliza Angular para optimizar los estilos CSS.
Framework Angular
SnackBar con Angular Material
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.
javascript Node.JS web
CORS con Node y Express
CORS es necesario para compartir recursos en distintos dominios. Hoy vamos a ver cómo habilitar CORS con Node.js al usar express.
Sé que CORS no es una cosa “que se habilite” pero encuentro facilidad al decirlo de este modo. De hecho lo que se hace es responder con un encabezado indicando cuáles dominios se permiten para compartir recursos.
Bien, veamos cómo configurar CORS con Node.
Framework Angular TypeScript
Obtener archivos de input file con Angular
En este post te mostraré cómo obtener los archivos seleccionados en un input de tipo file usando Angular. Vamos a obtener una referencia al elemento del DOM y luego acceder a la propiedad files.
Framework Angular
Angular Router: navegar de manera programada
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).
Framework Angular
Angular router: forzar hash en URL
Introducción
En este post te mostraré cómo forzar que el router de Angular use el hash en la URL. Este hash también es conocido como almohadilla, gatito, etcétera.
De este modo nuestra aplicación web tendrá algo como: http://localhost:4200/#/productos en lugar de algo como http://localhost:4200/productos.
Prefiero este modo para la URL del router de Angular porque no afecta la URL en el servidor y porque simplemente me ha gustado desde que uso las SPA.
bases de datos Framework Angular mysql php TypeScript web
Angular, PHP y MySQL – CRUD
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 probar el ejemplo en mi web de ejemplos.
Framework Angular TypeScript web
Variables del entorno con Angular
Resumen: aprender a usar las variables del entorno de angular usando archivo environment.prod.ts y environment.ts para diferenciar entre entorno de producción y entorno de desarrollo.
Framework Angular TypeScript web
Ejemplo de formulario con Angular
Resumen: en este post te mostraré un ejemplo simple de un formulario con Angular, en donde ligamos a un valor del componente con la vista del formulario.
En Angular existen dos tipos de formularios, los que son formularios reactivos (Reactive form) y los que son basados en plantillas (Template driven forms).
Hoy veremos un ejemplo de un Template driven form en Angular, que si vienes de AngularJS (o apenas estás comenzando) vas a entenderlo muy bien.
Si quieres puedes probar el resultado final aquí, y ver el código de todo el proyecto aquí.
Framework Angular TypeScript web
Angular: Peticiones HTTP con HttpClient
Resumen: mostrar cómo usar el cliente HTTP de Angular para hacer peticiones y consumir API REST usando métodos como GET, POST, PUT y DELETE además de JSON para el intercambio de datos.
En este post vamos a crear un servicio de Angular que a su vez usará el HttpClientModule para hacer peticiones HTTP. Después vamos a consumir ese servicio desde cualquier componente.
Framework Angular TypeScript
Servicios en Angular con ejemplo
Los servicios en Angular sirven para varias cosas y son muy parecidos a los servicios de AngularJS.
Un servicio es un servicio, ¿no? sirve para algo y de acuerdo a varios autores debería hacer solo una cosa y debería hacerla bien.
Los servicios sirven para varias cosas, al menos yo los he usado para:
- Encerrar funciones útiles
- Obtener cálculos con fórmulas definidas
- Invocar a servidor HTTP para consumir API
Un servicio en Angular es un paradigma, una forma de pensar y una forma de organizar el código, nada más. Aunque físicamente es un service, pero bien podríamos evitarlos, solo que no se recomienda.
Framework Angular HTML TypeScript web
Diálogo de confirmación con Angular Material
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í.
css Framework Angular web
Menú de navegación con Angular Material
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í.
css Framework Angular web
Agregar Angular Material a app de Angular
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/materiala 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.
