19/01/2021 | Consejos tecnológicos,Desarrollo de aplicaciones,Desarrollo de software,Tecnologías

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:
  • Para comprobar la versión instalada debemos ejecutar npm -v
[minti_spacer height=»40″]

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:
 [minti_spacer height=»40″]

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: image2 image1             [minti_spacer height=»40″] 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:
imagen_angular_autocomplete
[minti_spacer height=»40″]

MatCheckbox

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

main.component.html

...
<div>
   <mat-checkbox>Check me!</mat-checkbox>
</div>
Resultado:
Angular_matcheckbox_programacion
[minti_spacer height=»40″]

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:
Angular_programacion_MatDatepicker
[minti_spacer height=»40″] En Tribalyte somos expertos desarrolladores de todo tipo de apps tanto en Madrid como a nivel internacional, así que, si tienes alguna duda o quieres contarnos todas las necesidades de tu proyecto sin ningún compromiso,  ¡Contáctanos ahora mismo completando este formulario! [minti_spacer height=»30″] [hubspot type=form portal=8566440 id=c4443317-8be9-41c1-b760-7fc80fc146d3] [minti_spacer height=»20″]

Encuentra la solución, potencia tu proyecto, protege tu idea.

[minti_spacer height=»20″]

Compartir en:
Comentarios

  1. Hola Miguel, muy buenas.

    La respuesta se indica en el Paso 1 del apartado Angular Material. Ahí se explica que haciendo uso del comando "$ ng add" se instala el CDK, entre otras cosas.

    También está indicado en el Getting Started de Angular Material:

    Gracias por preguntar.

    Un saludo y síguenos en nuestras RRSS para más consejos prácticos.

    Responder
Deja tu comentario
Tu dirección de correo electrónico no será publicada. Todos los campos son obligatorios.
       Es necesario aceptar la política de privacidad para comentar.
Relacionados
Qué es la tecnología RPA

RPA, o Robotic Process Automation, es una tecnología que utiliza robots software, o «bots», para automatizar tareas repetitivas y basadas en reglas dentro de un entorno … Leer más

API REST vs. GraphQL: Dos caminos, una decisión inteligente para tu desarrollo web

En la constante evolución del desarrollo de servicios web, los arquitectos de software tienen a su disposición varios estilos de arquitectura para diseñar APIs eficientes y robustas. … Leer más

La importancia de la certificación de software crítico con VectorCAST

Introducción En el mundo actual, donde la tecnología juega un papel fundamental en nuestras vidas, la calidad y fiabilidad del software que se implementa es … Leer más