Instalación de Angular Material
Hoy vamos a revisar los pasos precisados para dejar instaladas las bibliotecas de Angular Material en una aplicación Angular. Pero, ¿qué es Angular Material? Bueno, básicamente se trata de una librería Angular que nos permite implementar de forma rápida y sencilla ciertos componentes gráficos para nuestra aplicación. Para que nos entendamos, Angular Material es un módulo diseñado para permitir la implementación de componentes de interfaces gráficas (sería algo así como la equivalencia de Bootstrap).
En realidad, se trata de una adaptación para Angular del lenguaje de diseño (visual) Material Design de Google. Así que, como no podía ser de otro modo, va a cumplir con los tres principios básicos de Material Design.
- El material es la metáfora 🔯 Inspirado en papel y tinta.
- Atrevido, gráfico e intencionado 🔯 Colores agresivos.
- El movimiento proporciona significado 🔯 Movimientos naturales.
Biblioteca de componentes Angular Material
Para que tengáis una visión general lo más rápida posible de esta herramientas, diremos que Angular Material es una biblioteca de componentes y estilos diseñada para Angular. Fue creada y es mantenida por el equipo de Angular en colaboración con Google. La biblioteca proporciona una serie de componentes y directivas de interfaz de usuario que siguen las pautas de diseño de Material Design, un conjunto de principios de diseño desarrollado por Google.
Las razones principales por las que considero que es buena idea utilizar Angular Material es nuestros proyectos como desarrolladores son las siguientes:
Componentes predefinidos: Esta biblioteca ofrece una amplia variedad de componentes gráficos listos para usar, como botones, tarjetas, formularios, barras de progreso, barras de herramientas, y muchos más. Estos componentes están diseñados para ser coherentes y seguir las mejores prácticas de diseño.
Estilos consistentes: Los estilos y temas de la biblioteca siguen las directrices de Material Design, lo que asegura una apariencia consistente en toda tu aplicación.
Accesibilidad: esta herramienta pone un fuerte énfasis en la accesibilidad, asegurándose de que los componentes sean utilizables por personas con discapacidades y cumplan con estándares de accesibilidad web.
Adaptabilidad y diseño responsive: Los componentes están diseñados para ser adaptativos y responder a diferentes tamaños de pantalla, facilitando la creación de aplicaciones que funcionen bien en dispositivos móviles y de escritorio.
Integración con Angular CLI: Uno de los puntos fuertes de la biblioteca es que está integrada con la interfaz de línea de comandos (CLI) de Angular, lo que facilita su instalación y configuración en un proyecto Angular.
Tema personalizable: Puedes personalizar fácilmente el tema visual para que coincida con la apariencia de tu aplicación. Esto se logra mediante la modificación de variables de estilo o mediante la creación de temas personalizados.
Documentación completa: Por último, y no por ello menos importante, hay que destacar que la herramienta proporciona una documentación detallada y ejemplos que facilitan la comprensión y la implementación de sus componentes.
 |
| Aspecto visual de una página implementada con Angular Material |
Por mi parte, voy a dejar la charla teórica aquí. Si tenéis más inquietudes y queréis entrar más en detalle, podéis dirigiros a la página oficial de Angular Material.
https://material.angular.io/
Instalación de Angular Material
A continuación, vamos a ir viendo los pasos necesarios para dejar instaladas las bibliotecas de Angular Material en nuestra aplicación Angular. Puntualizar que vamos a realizarlo sobre la versión Angular 17, así que tenedlo en cuenta si estáis trabajando con una versión posterior.
1º) Para lanzar la instalación de Angular Material tenemos que introducir lo siguiente en la línea de comandos del terminal de Angular CLI.
ng add @angular/material
2º) El instalador nos preguntará si queremos proceder con la instalación de Angular Material. Contestamos con "Y" y se iniciará el proceso.
ℹ Using package manager: npm
✔ Found compatible package version: @angular/material@17.1.0.
✔ Package information loaded.
The package @angular/material@17.1.0 will be installed and executed.
Would you like to proceed? Yes
3º) A continuación, nos indicará que seleccionemos el tema por defecto que va a tener nuestra instalación de Angular Material. Esto afectará a los colores que se mostrarán por defecto en nuestra aplicación.
Seleccionamos, por ejemplo, el tema "Indigo/Pink".
4º) En el siguiente paso nos indicará si queremos que se estableza la tipografía de estilos de Angular Material. Seleccionamos la opción "N".
? Set up global Angular Material typography styles? (y/N)
5º) Nos preguntará si queremos que nuestra aplicación incluya el módulo Angular Animations. Escogemos la opción "Include and enable animations".
6º) El proceso continuará con la instalación de los paquetes requeridos. Si no hay ningún problema, debería concluir mostrando algo como lo siguiente.
UPDATE package.json (1114 bytes)
✔ Packages installed successfully.
UPDATE src/app/app.config.ts (322 bytes)
UPDATE angular.json (3131 bytes)
UPDATE src/index.html (563 bytes)
UPDATE src/styles.css (181 bytes)
7º) Una vez finalizada la instalación, en nuestro proyecto han debido quedar instalados los tres módulos siguientes.
- Angular Material
- Angular Component Development Kit (CDK)
- Angular Animations
Si nos vamos al fichero package.json, debería tener un aspecto similar al siguiente.
Tal y como se aprecia, se han instalado las tres dependencias siguientes:
- @angular/animations (versión 17.1.0)
- @angular/cdk (versión 17.1.0)
- @angular/material (versión 17.1.0)
8º) Finalmente, si arrancamos la aplicación, no deberíamos tener problema alguno si la instalación se ha realizado correctamente.
ng serve -o
Pues nada, con los pasos indicados ya tendríamos instalada la biblioteca Angular Material en nuestra aplicación Angular. En futuros post ya iremos desgranando cómo se pueden ir implementando diferentes componentes visuales en nuestra web. En cualquier caso, siempre tendréis disponible la documentación de la página oficial para conocer más detalles. Por supuesto, como siempre os digo, aquí abajo podéis dejarme cualquier duda que os surja al respecto.
Saludos.
Comentarios
Publicar un comentario