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/material a 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.

Agregar Angular Material

Una vez que hayas instalado la angular cli, ve a tu proyecto y ejecuta:

ng add @angular/material

Selecciona cualquier tema presideñado.

HammerJS es para reconocer gestos en pantallas táctiles, su inclusión depende de quién usará y cómo usará tu app.

Cuando se te pregunte sobre las animaciones selecciona que sí.

Al agregar Angular Material se harán alguno cambios en tus estilos. También se importarán algunas fuentes.

No olvides que ya puedes ejecutar ng serve para servir tu app.

El contenedor

Para que el color de fondo sea aplicado correctamente, tu app debe estar dentro de un elemento mat-sidenav-container, si no quieres usar este elemento, aplica la clase mat-app-background al contenedor.

En mi caso le agregué la clase al body así:

See the gist on github.

Elegir un tema de Angular Material

Para no complicarnos creando un tema podemos usar uno predefinido. Yo usaré el deeppurple-amber.css así que en styles.css (dentro de src) hay que agregar la siguiente línea:

See the gist on github.

En mi caso, con los otros estilos, se ve así (aunque los márgenes van por mi cuenta):

See the gist on github.

Nota: también puedes cambiar el tema en angular.json, ahí tendrás algo así:

See the gist on github.

Si los cambias en esa línea cámbialos en la otra que está en el mismo archivo.

Puedes ver otros temas aquí.

Algunos componentes

Para terminar vamos a usar algunos componentes de Angular Material. En este caso usaré MatButtonModule y MatInputModule para diseñar un formulario.

Los vamos a importar en app.module.ts dentro de imports. Bueno, primero los importamos:

See the gist on github.

Después en @NgModule los agregamos dentro de imports:

See the gist on github.

Dentro de nuestra vista podemos usar los componentes. Yo lo he hecho directamente en la raíz así que queda así:

See the gist on github.

Con el siguiente resultado:

Si seleccionaste otro tema, los colores y estilos pueden variar. Después de eso es momento de crear tus aplicaciones con estilo Material Design o como le digas; usando Angular para el funcionamiento.

Por cierto, aquí la documentación oficial.