Introducción a Angular Material

Angular Material: aunque ya tengamos algunas entradas del Blog en las que hemos nombrado Angular, puede que no tengáis claro de qué se trata. Pues bien, Angular es un framework desarrollado en TypeScript que permite el diseño de aplicaciones web, de código abierto y mantenido por Google.

Por otro lado, Angular Material es un módulo construido por y para Angular. Dicho módulo permite implementar componentes Angular con un diseño basado en Material Design.

En esta entrada haremos una introducción resumida a Angular y al módulo Angular Material mostrando el proceso paso a paso. Para ello, seguiremos las guías de las páginas oficiales. Antes de comenzar, debemos cumplir con los siguientes requisitos previos:

Node.js

Angular requiere Node.js 10.9.0 o superior:

• Para comprobar la versión instalada debemos ejecutar node -v
• Para obtener Node.js debemos ir a nodejs.org

npm (Node.js package manager)

Angular, el CLI de Angular y las aplicaciones basadas en Angular dependen de características y funcionalidades de librerías disponibles a través de paquetes npm. Npm se instala con Node.js por defecto:

Aplicación Angular

A continuación veremos cómo instalar el CLI de Angular, generar una aplicación Angular de prueba y lanzar dicha aplicación.

Paso 1: Instalar el CLI de Angular

Usaremos el CLI de Angular para crear proyectos, generar aplicaciones y bibliotecas, entre otras cosas. Para instalarlo debemos ejecutar el siguiente comando en una consola/terminal:

$ npm install -g @angular/cli

La opción -g permite realizar la instalación de forma global.

Paso 2: Generar una aplicación

Para crear un nuevo workspace y generar una aplicación de prueba debemos utilizar el comando new disponible a través del CLI de Angular:

$ ng new material-app

Paso 3: Lanzar la aplicación

Ahora que tenemos la nueva aplicación generada podemos probarla utilizando el comando serve del CLI de Angular desde el directorio donde se creó la aplicación:

$ cd material-app
$ ng serve --open

La opción –open permite abrir la aplicación en un navegador.

Como resultado debemos poder ver nuestra aplicación en el navegador a través de la URL http://localhost:4200 por defecto. Debería ser algo como la siguiente imagen:

Angular Material

En esta sección añadiremos el módulo de Angular Material a las dependencias de nuestra aplicación de prueba y probaremos algunos componentes.

Paso 1: Añadir Angular Material

Haremos uso del CLI de Angular nuevamente para añadir Angular Material a nuestra aplicación. Para ello, ejecutamos el siguiente comando desde el directorio de la aplicación:

$ ng add @angular/material

A parte de modificar los ficheros correspondientes, el comando add va a instalar Angular Material, el Kit de Desarrollo de Componente o CDK (siglas en inglés de Component Development Kit), Angular Animations y hará las siguientes preguntas:

• Elegir un tema por defecto, o “custom” para un tema propio.
• Configurar HummerJS para el reconocimiento de gestos.
• Configurar las animaciones del navegador para Angular Material.

Paso 2: Generar un componente

Aunque no es necesario, vamos a generar un componente principal de ejemplo donde incluiremos algunos de los componentes de Angular Material. Para generar un nuevo componente debemos utilizar el siguiente comando:

$ ng generate component main

El comando generate junto con el tipo de esquema “component” generará el directorio “main” y dentro, los siguientes ficheros:

• main.component.html
• main.component.scss
• main.component.spec.ts
• main.component.ts

Si queremos que nuestra aplicación muestre este componente por defecto, podemos hacerlo añadiendo el fichero main.module.ts al directorio del nuevo componente con el siguiente contenido:

main.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { Routes, RouterModule } from "@angular/router";
import { MainComponent } from "./main.component";

const routes: Routes = [
	{
    	path: "",
    	component: MainComponent
	}
];

@NgModule({
	imports: [
    	CommonModule,
    	RouterModule.forChild(routes)
	],
	exports: [
    	MainComponent
	],
	declarations: [MainComponent]
})
export class MainModule {
}

Además, será necesario importar el módulo del nuevo componente en el fichero app.module.ts:

app.module.ts

...
import { MainModule } from "./main/main.module";

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

También debemos modificar el fichero app-routing.module.ts añadiendo la ruta al nuevo componente:

app-routing.module.ts

...
const routes: Routes = [
	{
    	path: "app-main",
    	loadChildren: "./main/main.module#MainModule"
	}
];
...

Por último, debemos borrar el contenido del fichero app.component.html generado automáticamente.

app.component.html

<router-outlet></router-outlet>

Paso 3: Usar componentes de Angular Material

Para usar componentes de Angular Material debemos hacer lo siguiente:

• Importar el módulo del componente/directiva en main.module.ts
• Añadir el tag del componente a main.component.html o,
• Añadir las directivas a los tags de HTML

En este Post veremos algunos de los componentes para formularios de Angular Material. En los ejemplos se asume que se está haciendo uso de Reactive Forms de Angular, el cual se ha nombrado y utilizado en la entrada de Ionic 4: Ejemplo práctico aplicación completa del Blog.

MatFormField, MatLabel y MatInput

Vamos a utilizar como primer ejemplo los componentes MatFormField y MatLabel y la directiva MatInput de Angular Material. MatFormField es utilizado para encapsular otros componentes de formulario. MatLabel es la etiqueta asociada a <mat-form-field>. MatInput es una directiva que permite a los elementos nativos <input> y <textarea> funcionar con <mat-form-field>.

main.module.ts

...
import { ReactiveFormsModule } from "@angular/forms";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatInputModule } from "@angular/material/input";
...

@NgModule({
	imports: [
    	...
    	ReactiveFormsModule,
    	MatFormFieldModule,
    	MatInputModule
	],
	...
})
export class MainModule {
}

main.component.html

<div>
   <mat-form-field>
   	<mat-label>Input</mat-label>
   	<input matInput
          	type="text"
          	placeholder="Input placeholder"
          	[formControl]="inputControl">
   </mat-form-field>
</div>

main.component.ts

import { Component, OnInit } from "@angular/core";
import { FormControl } from "@angular/forms";

@Component({
   selector: "app-main",
   templateUrl: "./main.component.html",
   styleUrls: ["./main.component.scss"]
})
export class MainComponent implements OnInit {

   public inputControl: FormControl;

   constructor() {
   }

   public ngOnInit(): void {
   	this.inputControl = new FormControl();
   }
}

main.component.scss

app-main:host {
   display: block;
   margin: 32px;
}

El resultado debe ser algo parecido al siguiente:

A continuación haremos lo mismo con otros componentes para ver el resultado.

MatAutocomplete

Se trata de un campo <input> con un panel de opciones sugeridas. Al igual que en el caso anterior, debemos importar en main.module.ts los módulos de los componentes de Angular Material utilizados.

main.component.html

...
<div>
	<mat-form-field>
    	<mat-label>Autocomplete</mat-label>
    	<input matInput
           	type="text"
           	aria-label="Number"
           	placeholder="Pick one"
           	[formControl]="autocompleteControl"
           	[matAutocomplete]="acOptions">
    	<mat-autocomplete #acOptions="matAutocomplete">
        	<mat-option *ngFor="let option of listOptions" [value]="option">
            	{{ option }}
        	</mat-option>
    	</mat-autocomplete>
	</mat-form-field>
</div>

main.component.ts

...
export class MainComponent implements OnInit {

	...
	public autocompleteControl: FormControl;
	public listOptions: Array<string>;

	constructor() {
    	this.listOptions = ["One", "Two", "Three"];
	}

	public ngOnInit(): void {
    	...
    	this.autocompleteControl = new FormControl();
	}
}

Resultado:

Proporciona la misma funcionalidad que un <input type=”checkbox”>.

main.component.html

...
<div>
   <mat-checkbox>Check me!</mat-checkbox>
</div>

Resultado:

MatDatepicker

Permite a los usuarios introducir una fecha a través tanto del campo de formulario como escogiendo una fecha desde el calendario.

main.component.html

...
<div>
   <mat-form-field>
   	<input matInput [matDatepicker]="picker" placeholder="Pick a date">
   	<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   	<mat-datepicker #picker></mat-datepicker>
   </mat-form-field>
</div>

Resultado: