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:
- 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 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:
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"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> </div>
Resultado:
Por ahora hemos visto algunos de los ejemplos de campos de formulario de Angular Material que proporcionan el estilo de Material Design a los elementos nativos.
Espero que os haya servido de ejemplo y que continuéis vosotros probando otros componentes. En futuras entradas explicaremos con mayor detalle los formularios reactivos de Angular (Reactive Forms).
¡Hasta la próxima!
