Two-way binding manual

Two-way binding manual

El two-way binding es un concepto fundamental que combina los dos tipos de binding que ya conoces: property binding y event binding. Esta técnica permite mantener sincronizados los datos entre el componente y la vista en ambas direcciones.

¿Qué es el two-way binding manual?

El two-way binding manual consiste en combinar explícitamente property binding [property] con event binding (event) para crear una sincronización bidireccional de datos. Esto significa que:

• Los cambios en el componente se reflejan automáticamente en la vista (property binding)
• Los cambios en la vista actualizan automáticamente el componente (event binding)

Implementación básica

Para implementar two-way binding manualmente, necesitas dos elementos:

1 - Property binding para mostrar el valor:

[value]="miVariable"

2 - Event binding para capturar cambios:

(input)="miVariable = $event.target.value"

Ejemplo práctico con input de texto

Aquí tienes un ejemplo completo que muestra cómo sincronizar un campo de texto con una propiedad del componente:

import { Component } from '@angular/core';

@Component({
  selector: 'app-ejemplo',
  template: `
    <div>
      <h3>Two-way Binding Manual</h3>
      
      <!-- Input con two-way binding manual -->
      <input 
        type="text" 
        [value]="nombre"
        (input)="nombre = $event.target.value"
        placeholder="Escribe tu nombre">
      
      <!-- Mostrar el valor actual -->
      <p>Nombre actual: {{ nombre }}</p>
      
      <!-- Contador de caracteres -->
      <p>Caracteres: {{ nombre.length }}</p>
    </div>
  `
})
export class EjemploComponent {
  nombre = 'Angular';
}

En este ejemplo, cuando el usuario escribe en el input:

1. El event binding (input) captura el evento y actualiza la propiedad nombre
2. El property binding [value] mantiene el input sincronizado con el valor actual
3. La interpolación {{ nombre }} muestra el valor actualizado instantáneamente

Diferentes tipos de eventos

Puedes usar diferentes eventos según el comportamiento que necesites:

Con evento input (tiempo real):

<input 
  type="text" 
  [value]="mensaje"
  (input)="mensaje = $event.target.value">

Con evento change (al perder el foco):

<input 
  type="text" 
  [value]="mensaje"
  (change)="mensaje = $event.target.value">

Ejemplo con diferentes tipos de inputs

El two-way binding manual funciona con cualquier tipo de input:

@Component({
  selector: 'app-formulario',
  template: `
    <div>
      <!-- Input numérico -->
      <input 
        type="number" 
        [value]="edad"
        (input)="edad = +$event.target.value">
      <p>Edad: {{ edad }} años</p>
      
      <!-- Checkbox -->
      <input 
        type="checkbox" 
        [checked]="activo"
        (change)="activo = $event.target.checked">
      <p>Estado: {{ activo ? 'Activo' : 'Inactivo' }}</p>
      
      <!-- Select -->
      <select 
        [value]="ciudad"
        (change)="ciudad = $event.target.value">
        <option value="madrid">Madrid</option>
        <option value="barcelona">Barcelona</option>
        <option value="valencia">Valencia</option>
      </select>
      <p>Ciudad seleccionada: {{ ciudad }}</p>
    </div>
  `
})
export class FormularioComponent {
  edad = 25;
  activo = true;
  ciudad = 'madrid';
}

Usando métodos para lógica más compleja

En lugar de escribir la lógica directamente en el template, puedes usar métodos del componente:

@Component({
  selector: 'app-contador',
  template: `
    <div>
      <input 
        type="number" 
        [value]="contador"
        (input)="actualizarContador($event)">
      
      <p>Contador: {{ contador }}</p>
      <p>Doble: {{ contador * 2 }}</p>
      
      <button (click)="reiniciar()">Reiniciar</button>
    </div>
  `
})
export class ContadorComponent {
  contador = 0;
  
  actualizarContador(event: Event): void {
    const input = event.target as HTMLInputElement;
    const valor = +input.value;
    
    // Lógica adicional: solo permitir números positivos
    this.contador = valor >= 0 ? valor : 0;
  }
  
  reiniciar(): void {
    this.contador = 0;
  }
}

Ventajas del two-way binding manual

• Control total sobre cómo se procesan los datos
• Flexibilidad para añadir validaciones o transformaciones
• Comprensión clara de cómo fluyen los datos
• Base sólida para entender conceptos más avanzados

Limitaciones y consideraciones

El two-way binding manual requiere más código que las soluciones automáticas como ngModel. Sin embargo, es fundamental entenderlo porque:

• Te ayuda a comprender cómo funciona Angular internamente
• Es la base de todas las técnicas de binding más avanzadas
• Te permite tener control granular cuando lo necesites

En las próximas lecciones del módulo de formularios, verás cómo Angular proporciona herramientas más avanzadas como ngModel que simplifican este proceso, pero siempre se basan en los mismos principios que acabas de aprender.

Property + Event binding

La combinación explícita de property binding y event binding es la base técnica del two-way binding. Entender cómo estos dos mecanismos trabajan juntos te permitirá crear sincronizaciones de datos más sofisticadas y controladas.

Anatomía de la combinación

Cuando combinas property binding con event binding, estás creando un flujo bidireccional de información:

<!-- Flujo: Componente → Vista -->
[property]="valor"

<!-- Flujo: Vista → Componente -->  
(event)="valor = nuevoValor"

<!-- Combinación completa -->
<input [value]="dato" (input)="dato = $event.target.value">

Esta combinación establece un ciclo de sincronización donde cada cambio en una dirección desencadena la actualización en la otra.

Equivalencia con la sintaxis banana-in-a-box

El patrón que acabas de aprender es exactamente lo que Angular automatiza con la sintaxis [()]:

<!-- Two-way binding manual (lo que estás aprendiendo) -->
<input [value]="nombre" (input)="nombre = $event.target.value">

<!-- Two-way binding automático (equivalente) -->
<input [(ngModel)]="nombre">

La diferencia es que el manual te da control total, mientras que el automático es más conciso pero menos flexible.

Patrones de combinación comunes

Patrón básico con transformación:

<input 
  type="text"
  [value]="apellido"
  (input)="apellido = $event.target.value.toUpperCase()">
  
<p>Apellido en mayúsculas: {{ apellido }}</p>

Patrón con validación en tiempo real:

<input 
  type="email"
  [value]="email"
  (input)="actualizarEmail($event)"
  [class.error]="!emailValido">
  
<span *ngIf="!emailValido" class="mensaje-error">
  Email inválido
</span>

export class ComponenteEmail {
  email = '';
  emailValido = true;
  
  actualizarEmail(event: Event): void {
    const input = event.target as HTMLInputElement;
    this.email = input.value;
    this.emailValido = this.validarEmail(this.email);
  }
  
  private validarEmail(email: string): boolean {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  }
}

Debugging del flujo bidireccional

Para visualizar cómo fluyen los datos, puedes añadir logs temporales:

<input 
  [value]="usuario"
  (input)="debugUpdate($event)"
  placeholder="Nombre de usuario">

debugUpdate(event: Event): void {
  const input = event.target as HTMLInputElement;
  console.log('Valor anterior:', this.usuario);
  console.log('Nuevo valor:', input.value);
  
  this.usuario = input.value;
  
  console.log('Estado actual:', this.usuario);
}

Múltiples properties y events

Puedes combinar diferentes propiedades con diferentes eventos en el mismo elemento:

<input 
  type="range"
  [value]="volumen"
  [min]="0"
  [max]="100"
  (input)="volumen = +$event.target.value"
  (change)="guardarVolumen()">
  
<output>Volumen: {{ volumen }}%</output>

Manejo de diferentes tipos de datos

Para números:

<input 
  type="number"
  [value]="precio"
  (input)="precio = parseFloat($event.target.value) || 0">

Para booleanos:

<input 
  type="checkbox"
  [checked]="suscrito"
  (change)="suscrito = $event.target.checked">

Para arrays (select múltiple):

<select 
  multiple
  [value]="seleccionados"
  (change)="actualizarSeleccion($event)">
  <option value="opcion1">Opción 1</option>
  <option value="opcion2">Opción 2</option>
  <option value="opcion3">Opción 3</option>
</select>

actualizarSeleccion(event: Event): void {
  const select = event.target as HTMLSelectElement;
  this.seleccionados = Array.from(select.selectedOptions)
    .map(option => option.value);
}

Optimización del rendimiento

Para evitar actualizaciones innecesarias, puedes comparar valores antes de asignar:

actualizarConOptimizacion(event: Event): void {
  const input = event.target as HTMLInputElement;
  const nuevoValor = input.value.trim();
  
  // Solo actualizar si realmente cambió
  if (this.descripcion !== nuevoValor) {
    this.descripcion = nuevoValor;
    console.log('Valor actualizado:', nuevoValor);
  }
}

Manejo de eventos personalizados

También puedes crear eventos personalizados para componentes más complejos:

<div 
  class="editor-personalizado"
  [innerHTML]="contenido"
  (blur)="contenido = $event.target.innerHTML"
  (keyup)="contenido = $event.target.innerHTML"
  contenteditable="true">
</div>

<p>Caracteres: {{ contenido.length }}</p>

Comparación con one-way binding

One-way binding (solo lectura):

<input [value]="soloLectura" readonly>
<p>{{ soloLectura }}</p>

Two-way binding (lectura y escritura):

<input [value]="interactivo" (input)="interactivo = $event.target.value">
<p>{{ interactivo }}</p>

La diferencia clave es que el two-way binding permite que el usuario modifique el estado del componente a través de la interfaz.

Casos de uso avanzados

Throttling de actualizaciones:

private timeoutId: any;

actualizarConRetraso(event: Event): void {
  clearTimeout(this.timeoutId);
  
  this.timeoutId = setTimeout(() => {
    const input = event.target as HTMLInputElement;
    this.busqueda = input.value;
    this.realizarBusqueda();
  }, 300);
}

Validación compleja con múltiples campos:

<form>
  <input 
    [value]="password"
    (input)="password = $event.target.value; validarFormulario()">
    
  <input 
    [value]="confirmPassword"
    (input)="confirmPassword = $event.target.value; validarFormulario()">
    
  <button [disabled]="!formularioValido">Registrar</button>
</form>

La combinación de property binding y event binding te proporciona flexibilidad total para crear interfaces reactivas que se adapten exactamente a las necesidades de tu aplicación. Este conocimiento es fundamental para entender cómo Angular maneja el estado y la sincronización de datos en aplicaciones más complejas.