En esta publicación nos acercaremos a cómo Google hace sus páginas webs con Material Design y Angular Material. Explicaremos cómo instalar Material y un ejemplo básico de cómo trabajar con botones de Angular Material.

¿Qué es Material Design?

Material design es un sistema de diseño de aplicaciones creado por Google. Este sistema define un conjunto de normativas (o conjunto de directrices) sobre como diseñar aplicaciones.

“Material Design es un lenguaje visual que sintetiza los principios clásicos del buen diseño con la innovación de la tecnología y la ciencia.”

– Google –

La web oficial de material design es: https://material.io/

Podemos ver que su eslogan es “Build beautiful products, faster”, su traducción sería algo así como: “Cree productos atractivos más rápido”.

Un poco de historia sobre Material Design

El proyecto en sus inicios empezó llamándose Hera, más tarde fue renombrado a Quantum Paper para, finalmente, acabar recibiendo el nombre de Material Design.

En sus orígenes fue desarrollado principalmente fue enfocado a aplicaciones para el sistema operativo Android (a partir de la versión Lollipop Android 5.0). Pero con el tiempo se ha adaptado a múltiples dispositivos y plataformas.

Durante la conferencia Google I/O (evento anual donde Google presenta sus novedades: productos, software, etc.) celebrada en Junio de 2014  se presentó la primera versión de Material, Material Design 1.0.

– A partir de 2015 Google lo empieza a implementa en la mayoría de sus aplicaciones para Android. Algunas de ellas son: Gmail, Youtube, Google Drive, Google Maps, etc. Y progresivamente más tarde, a lo largo del tiempo sobre el resto de aplicaciones (entre las que se incluyen las aplicaciones webs) como: Google Drive, Google Docs, Google Sheets, etc.

– Implementando Material sobre todas las aplicaciones Google busca dar una experiencia consistente y uniforme sobre todas las plataformas.


¿Qué es Angular Material?

Google decidió que Material fuera un proyecto open source (es decir de código abierto, software libre). Y por ello, Google lanzó APIs para que los desarrolladores externos también puedan incorporar Material Design sobre sus aplicaciones.

Nosotros como estamos trabajando sobre Angular y no sobre React o Vue, tenemos que utilizar Angular Material.

Por tanto, Angular Material, no es nada más y nada menos que el módulo que nos permitirá trabajar con Material en nuestras aplicaciones de Angular.

Una UI componente library, es decir, una interfaz gráfica para aplicar a nuestras aplicaciones de Angular.

Instalando Material sobre el proyecto:

Primeramente vamos a ver como añadir Angular Material sobre una aplicación de Angular.

Para ello nos apoyaremos sobre la sección Getting started de la web oficial de Angular Material:

Y nos fijamos que en la sección de getting-started, nos indica que lo primero que tenemos que hacer es instalar Angular Material

Para ello, antes de nada creamos un proyecto de Angular:

Y una vez situados en el proyecto, vamos a instalar angular material mediante a la instrucción: ng add @angular/material

Y aquí nos aparece que mensaje indicándonos que escojamos el tema prebuild (prediseñado) o seleccionemos un tema personalizado. Tenemos dos opciones:

  • Utilizar los temas que automáticamente nos proporciona Angular Material:

  • Utilizar un tema personalizado de Angular Material

En nuestro caso, por el momento seleccionaremos el tema Indigo/Pink:

Una vez seleccionado el tema, nos aparecerán dos preguntas:

  • ¿Set up global Angular Material typography styles?
  • ¿Set up browser animations for Angular Material?

De momento a ambas respuesta le decimos que Y (de Yes) y luego entraremos en detalle sobre que son etc.

Y una vez respuestas, vemos que seguidamente nuestro package.json se actualiza.

Si vamos a dicho fichero podemos ver que se nos ha instalado dos dependencias/packages en nuestro proyecto:

Aunque esto no es necesario que lo hagáis, sino, que es a modo de culturilla sobre Angular Material, lo que realmente hace ng add @angular/material internamente es llamar dos veces a npm (por ello aparecen dos líneas de Installing package for tooling via npm) para realizar la instalación de los packages @angular/material y @angular/cdk

Por lo que el equivalente de de ng add @angular/material en npm sería  npm install --save @angular/material @angular/cdk

Pero con la diferencia de que con la instrucción de Angular CLI ng add @angular/material no solo instala las dependencias, sino que internamente haces algunas cosas más como configurar el tema inicial, etc.

Si no usaremos ng add @angular/material tendríamos que hacer todos los pasos que veremos a continuación de forma manual.

Vamos a verlo más a detalle:

Precisamente, dentro del archivo angular.json concretamente dentro del array de estilos, es donde se establece el tema que vamos a usar:

Si vamos al archivo package-lock.json, que si recordamos es el archivo que contiene el árbol de todas las dependencias con la versión exacta, podemos ver que nos ha agregado la dependencia CDK 11.0.3:

Angular Team ha desarrollado CDK (Kit de desarrollo de componentes), el objetivo detrás de CDK era proporcionar a los desarrolladores más herramientas para crear componentes increíbles para la web. CDK nos permite utilizar características de material angular sin adoptar el lenguaje visual del diseño de materiales.

Por lo que si nos metemos en la web oficial de Angular Material: https://material.angular.io/ podemos ver todas las versiones disponibles de Angular Material y que en el proyecto estamos trabajando con la última versión de Angular.

Anteriormente, cuando hemos realizado la instalación angular nos ha hecho dos preguntas Angular y a ambas hemos respondido Yes sin preguntarnos realmente que consecuencias tiene en el proyecto. Vamos a analizarlas:

¿Set up global Angular Material typography styles? que sería algo así cómo ¿Configurar estilos de tipografía global de Angular Material? Establece los estilos de tipografía (es decir, las fuentes de texto) de Angular Material sobre nuestra aplicación.

Muestra de ello, es que si vamos al archivo index.html podemos ver que se han añadido varias fuentes a nuestro documento general de la aplicación. Y que por lo tanto, afectarán a todos los templates (vistas HTML) de nuestra aplicación.

Además, añade la clase class=”mat-typography” sobre la etiqueta body. Mat-typography es la encarga de aplicar estas fuentes en nuestra aplicación

La segunda pregunta nos preguntaba ¿Set up browser animations for Angular Material? que sería algo así cómo ¿Configurar animaciones de navegador para Angular Material?

Si vamos al fichero app.module.ts (el archivo del módulo principal de nuestra aplicación),podemos ver que hemos importado el BrowserAnimationModule. Ya por el nombre, que el módulo sea de Animaciones y que la pregunta pregunte algo de animaciones ya nos da unos indicios de que estaba relacionado.

ImportamosBrowserAnimationsModule sobre el módulo principal debido a que muchos componentes de Material dependen del módulo de animaciones angulares para poder hacer transiciones más avanzadas. Si deseamos que estas animaciones funcionen en nuestra aplicación, debemos instalar el @angular/platform-browser/animationsmódulo e incluirlo BrowserAnimationsModuleen su aplicación.

Y finalmente vemos que sobre style.css Angular Material nos ha aplicado un reset de estilos:

Finalmente, si vamos a la web oficial de Angular Material y por ejemplo vamos a Components > Button. Podemos ver los distintos botones que nos ofrece Angular:

Y si bajamos un poquito más tenemos las clases que vamos a aplicar a nuestros botones:

Además de la manera de añadirle un background a nuestro botón:

Para ello, vamos a nuestro component por defecto app.component.html y escribimos un botón sobre el que añadimos alguna de estas clases. Además añadiremos un pequeño Vamos a ver un ejemplo:

Pero el resultado que hemos obtenido es unos botones tradicionales de HTML de los de toda la vida vamos.

Entonces ¿Que nos faltaría? Material es un conjunto de componentes (“o piezas”) de Angular que nos permiten integrarlos en nuestra aplicación menus, toolsbars, botones, etc

Pero existen multitud de componentes y cada uno de ellos utiliza un módulo distinto de Angular Material para hacer que esos componentes funcionen en Angular. Por tanto, si queremos utilizar los botones de Angular Material, debemos importar el módulo de botones. ¿Y como sabemos que módulo utiliza? Vamos a la API y nos aparece el import:

Lo copiamos y nos vamos a nuestro módulo principal app.module.ts y añadimos lo siguiente:

Si reiniciamos el servidor podemos comprobar que ya hemos creado nuestros primeros botones con Angular Material ¡Enhorabuena! 🙂

Modulozarizando a Material

Por el momento, solamente hemos trabajado con los botones que solamente necesitar importar el módulo de Angular material MatButtonModule pero, ya hemos visto que tenemos muchos componentes en Angular Material. Lo que nos supone que si trabajamos con el módulo principal tal y como lo tenemos va a tener muchos imports.

Algunos de los principales componentes son:

  • Button and Indicators
  • Navigation
  • Layout
  • Form Controls
  • Popups and Modals
  • Data Tables

Un ejemplo de ello, aunque no lo vamos a desarrollar, solo es a modo de idea para entender que vamos a hacer y porque. Para que os hagáis a la idea de la envergadura que esto puede alcanzar es que tan solo para realizar un Datepicker (calendario de fechas) tenemos que importar todo esto en nuestro módulo. Que además se combinará con todo lo que utilicemos en el desarrollo de nuestra aplicación para trabajar con Formularios, NgModel, etc.

Todo esto, podría suponer un gran desorden que aunque nada se queje es válido y funciona, no es recomendable trabajar así. Y menos aún en Angular. Ya que, si por algo destaca, es por su estructura ordenada y nosotros somos los primeros interesados en no romper ese orden.

Por ello, vamos a modularizar a Angular Material, es decir vamos a crear un módulo de Angular Material sobre el que importaremos todo lo necesario para trabajar con Angular Material.

Y finalmente desde nuestro app.module.ts importaremos a dicho módulo en vez de importar a todos los módulos necesarios para trabajar con nuestros componentes y Angular Material directamente en el módulo principal.

Vamos a ello, para ello primeramente creamos el módulo:

Una vez creado el módulo, vamos a mover los módulos de Angular Material hacía el módulo que los va a englobar. Añadiendo dichos módulos en imports y también en exports para cuando importemos el modulo MaterialModule en app.module.ts, pueda acceder a dichos módulos (gracias a declararlos también en exports a parte de en imports).

El resultado final será:

Si paramos y volvemos a arrancar nuestra aplicación debido a que hemos modificado módulos y angular no es capaz de detectar cambios importantes en nuestra aplicación, podemos ver que nos funciona correctamente:

Pero ¿Tiene sentido poner idénticamente los mismos módulos en import y export? ¿Tener el listado de componente de Material de forma duplicada/redundante sería correcto? La respuesta es sí y es totalmente funcional como acabamos de ver pero también podemos crear una lista de todos los componentes y solo tener que mantener dicha lista. De la siguiente manera:

Esto es todo por hoy, espero que os haya gustado y os haya servido para acercaros a como Google hace sus webs con Material Design y a Angular Material. Un saludo y hata la próxima 🙂