Conociendo Angular Material

En el mundo de la programación, existen muchas herramientas que facilitan el proceso de desarrollo de aplicaciones. Hoy hablaré de una de ellas, que se utiliza junto con el Framework Angular: estoy hablando de Angular Material.

Angular Material es una biblioteca de componentes de interfaz de usuario que ayuda en el desarrollo de interfaces cohesivas y atractivas, utilizando componentes predefinidos de acuerdo con las directrices de Material Design, como botones, menús, listas, tablas, íconos, calendarios, entre otros.

Proceso de instalación de Angular Material

Consejo: Si no sabes cómo instalar Angular CLI en tu computadora, te recomiendo este artículo de João Octávio que explica mejor sobre los Primeros pasos en Angular.

1-  Crear un proyecto Angular. (opcional)

Si ya tienes un proyecto Angular para instalar Angular Material, salta este paso:

En tu terminal, escribe el comando: ng new nombre-del-proyecto

responde yes a las preguntas que aparezcan en tu terminal, elige el formato de stylesheet que prefieras y espera a que termine la instalación.

2- Instalando Angular Material.

Consejo: no dejes de revisar la documentación oficial de Angular Material

En tu terminal, dentro de tu proyecto, escribe el comando: ng add @angular/material

responde yes a las preguntas que aparezcan en tu terminal, elige un tema entre las opciones disponibles o uno personalizado.

después, te preguntará si deseas incluir el módulo Angular animations, selecciona Include and enable animations

Espera a que termine la instalación.

3- Usando Angular Material.

En la documentación de Angular Material hay algunos ejemplos de cómo utilizar Angular Material en tu proyecto. A continuación, te dejo el enlace a los ejemplos: Componentes do Angular Material.

Creando botones básicos con Angular Material

En tu proyecto, busca el módulo al que pertenece el componente en el que quieres añadir tu botón; en este caso, utilizaremos app.module.ts

Añade el import de los módulos de botones: MatButtonModule e y de íconos: MatIconModule de Angular Material.

Crea un botón en tu html:

Añade la etiqueta de Angular Material:

Añade el color primario de tu proyecto a tu botón (opcional):

En tu terminal, escribe el comando: ng serve

Así se verá tu botón:

Dejaré algunos ejemplos de algunos tipos de botones de ejemplo

En el navegador:

En el Html:

Como acabamos de ver, Angular Material es una poderosa biblioteca de componentes de interfaz de usuario que complementa el Framework Angular.

Hemos abordado el proceso de instalación y la creación de botones simples utilizando los módulos de botones e íconos de Angular Material.

O Angular Material ofrece una amplia variedad de componentes de interfaz de usuario basados en las especificaciones de Material Design, convirtiéndose en una herramienta indispensable para quienes buscan optimizar el proceso de desarrollo y ofrecer una experiencia de usuario espectacular.

Esta herramienta puede ayudar en el desarrollo de aplicaciones al proporcionar una gran variedad de componentes que el desarrollador puede utilizar en sus proyectos sin renunciar a la practicidad y al profesionalismo.

En un escenario donde el diseño y la experiencia del usuario juegan un papel fundamental en la creación de aplicaciones, Angular Material surge como un aliado confiable para crear y desarrollar una experiencia de usuario ejemplar. Ya seas un entusiasta de Angular o un experto, Angular Material se destaca como una herramienta crucial para lograr resultados extraordinarios.

¡Buen estudio para todos!