Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
19/01/2021 | Consejos tecnológicos,Desarrollo de aplicaciones,Desarrollo de software,Tecnologías
Introducción a Angular Material
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
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
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
- 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
- main.component.html
- main.component.scss
- main.component.spec.ts
- main.component.ts
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 {
}
app.module.ts
...
import { MainModule } from "./main/main.module";
@NgModule({
...
imports: [
...
MainModule
],
...
})
export class AppModule {
}
app-routing.module.ts
...
const routes: Routes = [
{
path: "app-main",
loadChildren: "./main/main.module#MainModule"
}
];
...
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
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;
}


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();
}
}

MatCheckbox
Proporciona la misma funcionalidad que un <input type=”checkbox”>.main.component.html
...
<div>
<mat-checkbox>Check me!</mat-checkbox>
</div>

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>

Encuentra la solución, potencia tu proyecto, protege tu idea.
[minti_spacer height=»20″]
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.