Usando Angular Material en nuestros proyectos (Parte I)

En la entrada de hoy vamos a ver como podemos usar Angular Material en nuestras aplicaciones Angular, utilizando como siempre Angular-cli

En primer lugar crearemos un nuevo proyecto con estilos sass, ya que nos va a dar más juego que el css de toda la vida.

Para ello, hacemos uso del flag --style=sass. Es decir, desde nuestra terminal crearemos el proyecto mediante la sentencia:

$ ng new ng4-material --style=sass

Una  vez creado el proyecto (y una vez que hemos accedido al directorio del mismo), instalaremos Angular Material mediante npm:

npm install --save @angular/material @angular/cdk

tal como se indica en la guía -https://github.com/angular/material2/blob/master/guides/getting-started.md-, tenemos que instalar también las @angular/animations, luego procedemos a instalarlas

$ npm install --save @angular/animations

Una vez que tenemos instalados los paquetes anteriores en nuestro proyecto, tenemos que importar el módulo MaterialModule

Para ello en el app.component.ts importamos el módulo y lo declaramos en la sección "imports" tal como se muestra a continuación:



Una vez importado el módulo no hace falta hacer nada más para empezar a utilizar los componentes UI de Material.

Vamos a colocar algún componente de UI material en nuestra template html para comprobarlo:




El resultado es el siguiente.

Como podemos observar, por un lado el botón circular contiene un icono de Material Design que no se está visualizando, y por otro los botones tienen un aspecto "pobre".
Para poder hacer uso de los iconos de Material tenemos que cargar los iconos en el index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Para poder usar los colores de los botones, tenemos que usar un theme de los que trae por defecto Material (o bien podemos crear una personalizado).
 Angular Material viene con varios themes predefinidos que se pueden consultar en la carpeta node_modules/@angular/material/prebuilt-themes de nuestro proyecto.

Para este ejemplo vamos a usar el theme indigo-pink 
en el fichero styless.sass, vamos a importar el fichero indigo-pink.css, para ello hacemos:
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

El resultado es el siguiente:

Antes de terminar (continuaremos viendo más componentes de Material en entradas posteriores) una anotación:

Algunos componentes de angular material dependen del módulo de animación para poder realizar transiciones más avanzadas. Si queremos que estas animaciones funcionen en la aplicación,
tenemos que instalar el módulo @angular/animations e incluir el BrowserAnimationsModule en la aplicación.

Lo dicho, en entradas posteriores veremos el tema de las animaciones y algunos de los componentes que podemos usar con Angular Material