Agregar material design en angular

Algo que estoy casi seguro, que como programadores no somos muy buenos combinando colores y haciendo el mejor diseño del mundo, google sabe sobre este problema, asi que hace unos años puso a disposición de todos Material.

Primeramente en android, y sin dudarlo enamoro los patrones de diseños y las animaciones que maneja, y aventureros comenzaron a sacar frameworks de js/css con esos patrones de diseño, por ejemplo materialze entre otros.

En angularjs tiene su tema de material design, pero al pasar a angular 2, esta no contaba, gracias al apoyo de la comunidad y el interés generado, material design en angular  es un hecho.

Realizando algunos tutoriales en la página he agregado elementos de material design por ejemplo:

Tabs:

Grids:

cards:

Entre otros elementos… La página en vivo es la siguiente: Web

Como instalar Material Design en angular

Vamos a ubicarnos por consola en nuestro proyecto de angular y vamos a escribir el siguiente comando:

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

Si queremos probar los ultimos cambios (no recomendado) vamos a escribir en la consola lo siguiente

npm install --save angular/material2-builds angular/cdk-builds

Ahora vamos a instalar las animaciones:

npm install --save @angular/animations

animation No es compatible con todos los navegadores pero la soluciones es la siguiente, en nuestro módulo vamos a agregar lo siguiente

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})

y en caso de que no queramos agregar este modulo podemos hacer esto

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})

Como se usa material design

Para usar todo esto debemos dar de alta en nuestro módulo, los elementos que queremos usar, esto para no llenarlo de elementos, que talvez nunca utilicemos.

vamos en las partes de los import

hay dos maneras de hacer:

import {MatButtonModule, MatCheckboxModule, MatToolbarModule, MatCardModule, 
  MatExpansionModule, MatDatepickerModule, MatInputModule, MatTabsModule, 
  MatTooltipModule, MatFormFieldModule, MatMenuModule, MatSnackBarModule} from '@angular/material';

en este caso son todos los elementos que uso en mi web, dividimos en comas.

otro es

import {MatCheckboxModule} from '@angular/material/checkbox';

aqui seria linea por linea, mi recomendacion es la primera opcion.

para ambos también tenemos que agregarlo en el imports del módulo así que se vería de la siguiente manera

imports: [
    BrowserModule,
    FormsModule,
    RouterRoutingModule,
    HttpClientModule,
    [BrowserAnimationsModule],
    [MatButtonModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatMenuModule, 
      MatExpansionModule, MatInputModule, MatTabsModule, MatTooltipModule, MatFormFieldModule,
      MatSnackBarModule]
  ],

Ya todo cargado, nuestra biblia sera el siguiente link : Material components

Aquí podemos ver cómo se comporta un componente con material design, y cual es la forma de llamarlo.

por ejemplo para agregar un botón con material design en nuestro html vamos a colocar lo siguiente

<button md-button>Click me!</button>

md-button es la expresión para que “cambie” nuestro boton, aqui unos ejemplos: web

si en este punto no se ve nada bien, tranquilos, falta incluir un tema

Incluir tema en Material design en angular

vamos a importar el que nos da por default angular, en otro post explicare como crear tu propio tema (es más fácil de lo que parece)

en nuestro style.css vamos a agregar en las primeras lineas lo siguiente

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Soporte de gestos

vamos a instalar hammerjs, este framework nos dara un soporte para estos elementos (mat-slide-toggle, mat-slider, matTooltip)

npm install --save hammerjs

y lo colocamos en nuestro module

import 'hammerjs';

Como último paso (opcional)

Google a creado poco a poco una gran lista de iconos para libre uso, orientados a material design, completamente gratis. esto vamos a ponerlo en nuestro index.html

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

material icon

con estos pasos estamos listos para comenzar hacer nuestras paginas web en angular y Material design.

Recuerden visitar nuestro seccion de angular donde explicamos a fondo cómo usar este framework