Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Ene 19
Angular Material introducción | Tribalyte Technologies

Introducción a Angular Material

  • enero 19, 2021
  • José Carlos Fatjó
  • 2 Comments
  • Consejos tecnológicos, Desarrollo de aplicaciones, Desarrollo de software, Tecnologías

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:

Index

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

 

 

 

 

 

 

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

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

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

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!

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

Artículos Relacionados:

  • image3Lanzamiento de BrightByte v0.2
  • C# (C Sharp): Qué es, dónde se utiliza y para qué sirve | Tribalyte TechnologiesC# (C Sharp): Qué es, dónde se utiliza y para qué sirve
  • Nueva versión de Fissios appNueva versión de Fissios app
  • C# vs java | Diferencias, ventajas y consejos de experto | Tribalyte TechnologiesC# vs Java | Diferencias, ventajas y consejos de experto
  • Introducción a aplicaciones de escritorio con Ionic 3.x y ElectronIntroducción a aplicaciones de escritorio con Ionic 3.x y Electron
  • Facebook
  • Twitter
  • LinkedIn
  • E-Mail

About The Author

Soy Ingeniero Informático de la UPM, experto en el desarrollo de software a medida y de aplicaciones web, móviles y nativas. Tengo conocimientos full-stack, pero lo que más me apasiona es la parte front-end.

2 Comments

  1. Miguel Cruz
    enero 25, 2021 at 9:36 pm · Responder

    Pregunta: No falto instalar el CDK antes de Material?

    • José Carlos Fatjó
      febrero 2, 2021 at 12:55 pm · Responder

      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.

Leave a reply Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

ELIGE UNA CATEGORÍA

  • Blockchain
  • Consejos tecnológicos
  • Desarrollo de aplicaciones
  • Desarrollo de software
  • General
  • Sistema embebido
  • Tecnologías
  • Uncategorized

Una compañía dedicada al desarrollo de apps, software y soluciones embebidas para empresas.

SOCIOS

Contacto

Glorieta de Quevedo 8 6º2
28015 Madrid (ESPAÑA)
Phone: +34 919 049 820 E-Mail: contact@tribalyte.com Web: www.tribalyte.com
Sello PYME INNOVADORA 21/01/2025
PYME INNOVADORA
Válido hasta el 21 de enero de 2025
escudo de MEIC 21/01/2025

AYUDA

  • Política de privacidad
  • Política de calidad
  • Política de seguridad
  • Términos de uso

CERTIFICACIONES

⠀⠀⠀⠀⠀⠀⠀⠀⠀

SUBVENCIONES

Tribalyte Technologies S.L. ha    conseguido la ayuda C007/20-ED de Red.es para el impulso y la promoción de actividades de I+i y para el fomento de la inversión empresarial para desarrollar el proyecto iPatia. Así mismo, valoramos muy positivamente la contribución del FEDER, principal fondo de la política de cohesión europea, por lo que supone de impulso a nuestro trabajo y en consecuencia al crecimiento económico y la creación de empleo de esta región y de España en su conjunto.
Esta página web utiliza cookies para mejorar su experiencia de usuario y para recabar estadísticas anónimas de uso. Aceptar Más información