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 o�ciales. Antes de comenzar, debemos
cumplir con los siguientes requisitos previos:

Index [o�]

0.0.1 Node.js
0.0.2 npm (Node.js package manager)
1 Aplicación Angular
1.1 Paso 1: Instalar el CLI de Angular
1.2 Paso 2: Generar una aplicación
1.3 Paso 3: Lanzar la aplicación
2 Angular Material
2.1 Paso 1: Añadir Angular Material
2.2 Paso 2: Generar un componente
2.3 Paso 3: Usar componentes de Angular Material
2.3.1 MatFormField, MatLabel y MatInput
2.3.2 MatAutocomplete
2.3.3 MatCheckbox
2.3.4 MatDatepicker

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:

▪ Para comprobar la versión instalada debemos ejecutar npm -v

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 modi�car los �cheros 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.

▪ Con�gurar HummerJS para el reconocimiento de gestos.
▪ Con�gurar 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 �cheros:

▪ 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
�chero 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 �chero app.module.ts:

app.module.ts

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

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

También debemos modi�car el �chero 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 �chero 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-�eld>. MatInput es una directiva que permite a los elementos nativos
<input> y <textarea> funcionar con <mat-form-�eld>.

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:

MatCheckbox

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