# Angular + Material

[\[Publicado el 4 de Junio, 2019 en rckstr1.github.io\]](https://rckstr1.github.io/2019/06/04/AngularMaterial.html)

## **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!"*](https://rckstr1.github.io/2019/05/30/HolaAngular8.html)*.*

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**

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

### **YARN**

```bash
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.

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

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

![](https://rckstr1.github.io/images/blog/AngularMaterial/01-ImportAnimations.png align="left")

## **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. ```bash
    ng generate module material
    ```
    
3. Importa el nuevo módulo en app.module.ts
    
4. ![](https://rckstr1.github.io/images/blog/AngularMaterial/02-CustomModule.png align="left")
    
5. Importa y exporta los componentes de Material en el módulo material.module.ts
    
6. 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.
    
    ![](https://rckstr1.github.io/images/blog/AngularMaterial/03-ImportComponents.png align="left")
    

### **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.

```typescript
@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:

```bash
npm install --save hammerjs
```

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

```typescript
import 'hammerjs';
```

![](https://rckstr1.github.io/images/blog/AngularMaterial/04-hammerjs.png align="left")

#### **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.

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

![](https://rckstr1.github.io/images/blog/AngularMaterial/05-Icons.png align="left")

## **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:**

```typescript
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:**

```xml
<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:**

```css
.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.

```bash
ng serve --open
```

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

![](https://rckstr1.github.io/images/blog/AngularMaterial/06-ItWorks.png align="left")

## **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](https://github.com/RCKSTR1/AngularMaterial) o si prefieres, puedes clonar el repositorio directo en [https://github.com/RCKSTR1/AngularMaterial.git](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**

* Documentación de Angular Material. [https://material.angular.io/guide/getting-started](https://material.angular.io/guide/getting-started)