Introducción

Material Design es un lenguaje visual que sintetiza los principios clásicos de buen diseño con la innovación de tecnología y ciencia. Material Design tiene como objetivo desarrollar un sistema que unifique la experiencia de usuario a través de diferentes plataformas, dispositivos y métodos de entrada y al mismo tiempo, proveer una base personalizable y flexible para la innovación.

Angular Material es una librería de componentes para aplicaciones con Angular. Estos componentes nos permiten crear aplicaciones atractivas, consistentes y funcionales apegándose a los principios de Material Design.

Paso 1: Instalar Angular Material, Angular CDK y Angular Animations

Si necesitas ayuda creando una aplicación de Angular, puedes ver los detalles en el post "¡Hola Angular 8!".

Puedes usar NPM o YARN para instalar los paquetes. Desde el folder de tu aplicación, en la terminal del sistema ejecuta la siguiente línea:

NPM

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

YARN

yarn add @angular/material @angular/cdk @angular/animations

Paso 2: Configurar las animaciones

Después de instalar el paquete de animaciones, importa el módulo BrowserAnimationsModule en tu aplicación para habilitar el soporte de animaciones.

En el archivo app.module.ts de tu aplicación, agrega BrowserAnimationsModule a la lista de imports.

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

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

Paso 3: Importar los componentes de Material UI

Los componentes de Material pueden importarse directamente en app.module.ts, sin embargo, como buena práctica, vamos a crear un módulo separado para importar los componentes. De esta manera, podemos tener nuestros módulos mejor organizados.

  1. En la consola, ejecuta la siguiente línea:
    2. ng generate module material
  2. Importa el nuevo módulo en app.module.ts
  3. Importa y exporta los componentes de Material en el módulo material.module.ts

    4. Para este ejemplo importaremos los siguientes componentes:

    • MatButtonModule
    • MatMenuModule
    • MatToolbarModule
    • MatIconModule
    • MatCardModule
    • MatSidenavModule
    • MatListModule

    Ya importados los componentes que vamos a utilizar, podemos llamarlos desde nuestra aplicación.

Estilos, íconos y soporte de gestos (opcional)

Temas prefabricados

Podemos incluir estilos prefabricados en nuestra aplicación, para este ejemplo, agrega lo siguiente a styles.css. 

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

Soporte de gestos

Algunos componentes como slide toggle, sliders y tooltips requieren HammerJS para soportar gestos. En este ejemplo no los estamos importando, pero en caso de que quieras usarlos puedes instalar HammerJS desde la consola ejecutando:

npm install --save hammerjs

Después de instalar hammerjs, debes importarlo en el archivo main.ts.

import 'hammerjs';

Iconos

Para poder utilizar los iconos de Material UI, tenemos que cargar la fuente de Material Icons en el bloque head del archivo index.html.

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

Paso 4: Construir nuestra interfaz de usuario

En este paso crearemos un ejemplo de interfaz de usuario responsiva utilizando los componentes de Material UI importados en nuestra aplicación.

Reemplaza los contenidos de app.component.ts con el siguiente código:

import { Component, ChangeDetectorRef, OnDestroy } from '@angular/core';
import { MediaMatcher } from '@angular/cdk/layout';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy {
    title = 'Angular + Material';
    mobileQuery: MediaQueryList;
    fillerNav = ['Opción 1', 'Opción 2', 'Opción 3', 'Opción 4', 'Opción 5', 'Opción 6', 'Opción 7'];

    fillerContent = Array.from({ length: 50 }, () => 'Interfaz gráfica usando componentes de Material UI. RCKSTR1 en GitHub. rckstr1.github.io');

    private _mobileQueryListener: () => void;

    constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
    }

    ngOnDestroy(): void {
    this.mobileQuery.removeListener(this._mobileQueryListener);
    }
}

Reemplaza los contenidos de app.component.html con el siguiente código:

<div class="app-container" [class.app-is-mobile]="mobileQuery.matches">
    <mat-toolbar color="primary" class="app-toolbar">
        <button mat-icon-button (click)="snav.toggle()">
        <mat-icon>menu</mat-icon>
        </button>
        <h1 class="app-app-name">{{title}}</h1>
    </mat-toolbar>
    
    <mat-sidenav-container class="app-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
        <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches"
        fixedTopGap="56">
        <mat-nav-list>
            <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
        </mat-nav-list>
        </mat-sidenav>
    
        <mat-sidenav-content>
        <router-outlet></router-outlet>
        <p *ngFor="let content of fillerContent">{{content}}</p>
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>

Reemplaza los contenidos de app.component.css con el siguiente código:

.app-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.app-is-mobile .app-toolbar {
    position: fixed;
    z-index: 2;
}

h1.app-app-name {
    margin-left: 8px;
}

.app-sidenav-container {
    flex: 1;
}

.app-is-mobile .app-sidenav-container {
    flex: 1 0 auto;
}

Paso 5: Ejecutar nuestra aplicación

En la consola integrada de Visual Studio Code, ejecuta la aplicación.

ng serve --open

Listo. Tenemos nuestra primera aplicación con Angular 8 y Material UI.

Conclusión

En este post vimos los pasos necesarios para utilizar componentes de Material Design en nuestras aplicaciones con Angular.

Ahora estas listo para experimentar con Angular 8 y los componentes de Material UI.

El código fuente completo de la aplicación de ejemplo puedes encontrarlo en GitHub, en https://github.com/RCKSTR1/AngularMaterial o si prefieres, puedes clonar el repositorio directo en https://github.com/RCKSTR1/AngularMaterial.git

Si tuviste algún problema o duda al seguir los pasos, o si tienes alguna pregunta acerca de este post, contáctame en Twitter, Facebook o LinkedIn.

Es cuánto.

Fuentes