En el post de introducción a Angular te hablé en general sobre el framework. En este post, explorarás algunos de los conceptos fundamentales en Angular como: componentes, decoradores, event binding y string interpolation. Y te dejaré una sorpresa al final.
Componentes
Para comenzar la introducción a Angular quiero hablar sobre su base principal: los componentes.
Los componentes son la base de cualquier aplicación en Angular. Un componente es una clase en TypeScript que controla una parte de la interfaz de usuario. Cada componente consta de tres partes principales: el template (HTML), la clase (TypeScript) y el estilo (CSS).
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>{{ title }}</h1>`,
styles: [`h1 { color: blue; }`]
})
export class AppComponent {
title = 'Bienvenidos a Angular';
}
String Interpolation
La string interpolation nos permite mostrar datos dinámicos en el template usando doble llaves {{ }}.
//app.component.html
<p>{{ message }}</p>//app.component.ts
export class AppComponent {
message = 'Hola, mundo!';
}Con String Interpolation, el contenido de message que hay en la clase de AppComponent se mostrará en el HTML.
Property Binding
Property Binding es una técnica que permite utilizar propiedades dinanimicas en los atributos del HTML. Esto facilita la actualización dinámica de la interfaz de usuario.
Se utiliza corchetes [] alrededor del nombre de la propiedad del elemento HTML.
<img [src]="imagenUrl" alt="Descripción de la imagen">Directivas
Las directivas se utilizan para: manipular el DOM, añadir funcionalidades a elementos existentes y crear nuevos componentes personalizados.
En otras palabras, una directiva es una clase que añade un comportamiento adicional a los elementos del DOM.
Tipos de Directivas
Hay tres tipos principales de directivas en Angular:
- Componentes: Son directivas con un template. Son el tipo más común de directiva.
- Directivas estructurales: Cambian la estructura del DOM añadiendo, removiendo o manipulando elementos. Ejemplos incluyen ngIf y ngFor.
- Directivas de atributo: Cambian la apariencia o el comportamiento de un elemento, componente u otra directiva. Ejemplos incluyen ngStyle y ngClass.
ngIf
*ngIf se utiliza para mostrar o ocultar elementos en el DOM basado en una condición.
<div *ngIf="isLoggedIn">Bienvenido, usuario!</div>ngFor
*ngFor se utiliza para iterar sobre una lista y generar un elemento para cada ítem.
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>ngClass
ngClass se utiliza para aplicar clases CSS de forma dinámica.
<div [ngClass]="{'active': isActive, 'inactive': !isActive}">Estado del usuario</div>ngStyle
ngStyle permite definir estilos en línea de manera dinámica.
<p [ngStyle]="{'color': isRed ? 'red' : 'blue'}">Este texto cambia de color!</p>NgModel
Comencemos con una de las directivas que se utiliza para los formularios: NgModel.
NgModel es una directiva que permite implementar el enlace de datos bidireccional (two-way data binding) entre un elemento de formulario en la vista. Es útil para manejar entradas de usuario en formularios.
Para usar NgModel, es necesario importar el módulo FormsModule en el archivo app.module.ts de tu aplicación:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Se añade esto
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule // Se añade esto. Importante para que pueda funcionar
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Una vez importado, puedes usar NgModel en tus plantillas HTML de esta manera:
<input [(ngModel)]="propertyName">Donde propertyName es una propiedad definida en tu componente.
¿Por qué es útil NgModel?
- Realiza un seguimiento del valor y el estado de validación de un control de formulario individual.
- Permite personalizar las validaciones que debería tener un campo o el mismo formulario.
- Facilita la creación de formularios controlados por modelo.
- Es importante notar que NgModel es comúnmente usado en Template-driven forms. Para formularios más complejos o con mejor rendimiento, se recomienda usar Reactive Forms.
Decoradores
Los decoradores son funciones que permiten añadir metadatos a clases, métodos, propiedades o parámetros. Estos metadatos son utilizados por Angular para configurar y gestionar los diferentes elementos de la aplicación, como componentes, servicios, directivas, pipes y módulos
Tipos de Decoradores en Angular
Existen varios tipos de decoradores y cada uno con un propósito específico:
- Decoradores de Clase:
- @Component: Define un componente de Angular.
- @Directive: Define una directiva.
- @NgModule: Define un módulo de Angular.
- Decoradores de Propiedad:
- @Input: Marca una propiedad como una entrada que puede recibir datos de un componente padre.
- @Output: Marca una propiedad como una salida que puede emitir eventos a un componente padre.
- @ViewChild: Permite acceder a un elemento hijo en la vista.
- Decoradores de Método:
- @HostListener: Escucha eventos en el host del componente.
- @HostBinding: Vincula una propiedad del host a una propiedad del componente.
- Decoradores de Parámetro:
- @Inject: Especifica dependencias para la inyección de dependencias.
- @Optional: Marca una dependencia como opcional.
En esta introducción de Angular solo te enseñaré brevemente la información de los decorators. En otro post se verá a mayor profundidad.
Event Binding
El event binding se utiliza para manejar eventos del DOM en componentes. Por ejemplo, conectar un botón con una función en el componente. Si antes has utilizado React o Vue, de seguro te suena de algo estos eventos.
onClick
// app.component.html
<button (click)="onClick()">Haz clic aquí</button>// app.component.ts
export class AppComponent {
onClick() {
alert('¡Botón clickeado!');
}
}Una forma muy común de manejar eventos, es pasar el “objeto de evento” $event, donde se capturan elementos del DOM. En lo general, este evento contiene la información que debemos procesar en el método.
Debes tomar en cuenta que las propiedades de un $event varian segun el tipo de evento DOM. Ejemplo, un evento de mouse incluye información diferente a la de un evento de edición de cuadro de entrada.
Al utilizar el $event ten en cuenta que este muestra más infomacion de la necesaria. Lo que rompe “la separacion de responsabilidades” entre la plantilla ( lo que ve el usuario ) y el componente ( cómo la aplicación procesa los datos del usuario ). Es mejor usar variables de referencia en la capa logica (componente) para abordar este problema.
Veamos algunos eventos.
scroll
Cuando quieras detectar cambios en el scrolling de una página, se utiliza el evento de scroll:
// app.component.html
<div class="box" (scroll)="onScroll($event)"></div>// app.component.ts
onScroll (event: Event) {
const element = event.target as HTMLElement;
console.log(element.scrollTop);
}
onBlur
Para detectar cuando un elemento pierde el foco se utiliza el evento onBlur.
// app.component.html
<input (blur)="onBlur()" placeholder="Pierde el foco para disparar el evento">// app.component.ts
export class AppComponent {
onBlur() {
alert('¡Elemento perdió el foco!');
}
}onChange
El evento onChange se dispara cuando el valor de un elemento cambia. Es común verlo en input o select.
// app.component.html
<select (change)="onChange($event)">
<option value="opcion1">Opción 1</option>
<option value="opcion2">Opción 2</option>
</select>
// app.component.ts
export class AppComponent {
onChange(event: any) {
console.log('Valor seleccionado:', event.target.value);
}
}Eventos de teclado
Otra cosa que puedes hacer, es leer las teclas que se estan digitando a medida que estas son digitadas.
// app.component.html
<input
type="text"
[value]="person.name"
(keyup)="onKeyUp($event)"
/>
<p>Name {{ person.name }}</p>
// app.component.ts
onKeyUp (event: Event) {
const element = event.target as HTMLInputElement;
this.person.name = element.value;
}
Tambien puedes capturar teclas especificas como ctr, Alt, Shift y sus combinaciones:
<input (keyup.control)='...respond to ctrl/control...'/>
<input (keyup.alt)='...respond to alt/control...'/>
<input (keyup.shift)='...respond to shift/control...'/>
<input (keyup.meta)='...respond to command...'/>
<input (keyup.control.shift.z)='......'/>
<input (keyup.enter)='...respond to enter...'/>
<input (keyup.escape)='...respond to escape...'/>
<input (keyup.shift.f)='...respond to shift.f...'/>Conclusión
Esta introducción de Angular es solo el inicio de lo que puedes lograr con este framework. Tengas experiencia o no, te ofrece las herramientas necesarias para crear aplicaciones web robustas y dinámicas.
La sorpresa: Para aprender más sobre angular, te recomiendo los siguientes canales de YouTube:
Sigueme en mis redes sociales para más contenido