Introducción + instalación de Angular Material

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 🙂

31 comentarios

  1. Hello there I am so thrilled I found your blog, I really
    found you by accident, while I was looking on Google
    for something else, Anyhow I am here now and would just like
    to say cheers for a tremendous post and a all round entertaining blog (I also love the theme/design), I don’t have time to read through it all at the moment
    but I have bookmarked it and also added in your RSS feeds, so when I have
    time I will be back to read much more, Please do keep up the great job.

  2. Hey! Do you know if they make any plugins to protect against hackers?
    I’m kinda paranoid about losing everything I’ve worked hard on. Any recommendations?

  3. Hello there, I believe your site could possibly be having internet browser compatibility
    issues. When I look at your blog in Safari, it looks fine but when opening
    in I.E., it’s got some overlapping issues. I simply wanted to provide you with a quick heads up!
    Apart from that, great website!

  4. Hello, i think that i saw you visited my web site thus i got here to go back the want?.I am attempting to in finding things to enhance my
    site!I guess its adequate to use some of your concepts!!

    Have a look at my site :: Wawza Apple Cider Gummies Reviews

  5. Perfect work you have done, this site is really cool with superb information.

    My page :: Bio Shed Keto Slim

  6. I gotta favorite this web site it seems extremely helpful handy.

    Here is my blog Moscatcher

  7. This is a really good tip especially to those new
    to the blogosphere. Brief but very accurate info? Thanks for sharing this one.

    A must read post!

    Review my web site Botanical Farms Reviews

  8. Hi colleagues, pleasant post and good arguments commented here,
    I am really enjoying by these.

  9. Hi there great blog! Does running a blog similar to this take a large amount of
    work? I have no knowledge of programming but I had been hoping to start my
    own blog in the near future. Anyhow, if you have any ideas or tips
    for new blog owners please share. I know this is off subject but I just had
    to ask. Cheers!

    Also visit my homepage … Pure Keto Burn Reviews

  10. Good blog! I truly love how it is simple on my eyes and the data are well written. I am wondering
    how I could be notified when a new post has been made.
    I have subscribed to your RSS feed which must do the trick!

    Have a great day!

    Have a look at my webpage; Vialis Male Enhancement

  11. Greetings, I think your web site could possibly be having browser compatibility
    problems. Whenever I look at your blog in Safari, it looks fine however when opening
    in Internet Explorer, it has some overlapping issues.
    I merely wanted to provide you with a quick heads up!
    Apart from that, great website!

    Stop by my homepage :: The Skin Company Cream Reviews

  12. Oh my goodness! Impressive article dude! Thank
    you so much, However I am going through problems
    with your RSS. I don?t know the reason why I am unable to subscribe to it.
    Is there anybody else getting identical RSS issues?
    Anybody who knows the answer will you kindly respond? Thanx!!

    my site :: Libido Boost Pills

  13. Hi there, just became aware of your blog through Google,
    and found that it’s really informative. I am gonna watch out for brussels.
    I?ll appreciate if you continue this in future. A lot of people will be benefited from your writing.
    Cheers!

    my website … Niva CBD Gummies Review

  14. Very nice post. I just stumbled upon your weblog and wanted to say that I’ve really enjoyed browsing your blog posts.
    In any case I will be subscribing to your feed and I hope you write
    again very soon!

  15. Wow, that’s what I was exploring for, what a stuff!
    existing here at this weblog, thanks admin of this
    web page.

    Also visit my webpage Moscatcher

  16. This is very interesting, You’re a very skilled
    blogger. I have joined your feed and look forward to seeking more of your fantastic post.

    Also, I have shared your web site in my social networks!

    Also visit my site: Yoni Pur

  17. Useful info. Lucky me I discovered your site by accident, and
    I am surprised why this accident did not happened in advance!
    I bookmarked it.

    Also visit my web site :: Pure Keto Burn Pills

  18. What’s up every one, here every one is sharing these kinds of familiarity,
    so it’s nice to read this webpage, and I used to visit this blog everyday.

  19. I have read so many content concerning the blogger lovers however this paragraph is really a nice paragraph, keep
    it up.

  20. This text is worth everyone’s attention. How can I find out more?

  21. I don’t even know the way I stopped up right here, but
    I believed this submit used to be great. I don’t recognise who you’re however definitely you
    are going to a famous blogger should you are not already.
    Cheers!

    Have a look at my web blog: http://www.koan.at

  22. Hey I know this is off topic but I was wondering if you knew of any widgets
    I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time and was hoping maybe
    you would have some experience with something like this.
    Please let me know if you run into anything. I truly
    enjoy reading your blog and I look forward to your
    new updates.

  23. Hey there! Do you know if they make any plugins to help
    with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good results.
    If you know of any please share. Thank you!

    Stop by my homepage … Arctos Portable AC Review

  24. I got what you intend, thanks for posting.
    Woh I am pleased to find this website through google.

    Here is my blog; http://www.goldenanapa.ru

  25. Hey there! I’m at work browsing your blog from my new
    iphone 3gs! Just wanted to say I love reading through your blog and look
    forward to all your posts! Carry on the fantastic work!

    Feel free to visit my web site – Green Leaf Hills CBD

  26. Hurrah! Finally I got a webpage from where I can in fact take helpful facts
    regarding my study and knowledge.

  27. I’m gone to inform my little brother, that he should also pay a quick visit this weblog on regular basis to take
    updated from newest information.

  28. Good day! Do you know if they make any plugins to assist with Search
    Engine Optimization? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very
    good success. If you know of any please share. Many thanks!

    Feel free to visit my page :: Cognitive IQ Pills

  29. Hi there! This blog post couldn’t be written any better!
    Looking at this article reminds me of my previous
    roommate! He always kept preaching about this. I’ll forward this article to him.
    Pretty sure he’s going to have a good read. Thanks for sharing!

  30. you’re in point of fact a excellent webmaster.
    The website loading velocity is incredible. It sort of
    feels that you’re doing any distinctive trick. Furthermore, The contents are masterwork.

    you have performed a wonderful activity on this topic!

    Also visit my web site … Botanical Farms CBD

  31. My spouse and I stumbled over here different page and thought I might as well check things out.
    I like what I see so now i’m following you. Look forward to checking out your web page again. cheap flights http://1704milesapart.tumblr.com/ cheap flights

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar