ngModel y two way binding en Angular

Aprende a dominar el two way data binding en Angular con ngModel para sincronizar datos entre HTML y TypeScript sin lógica adicional. Esta técnica integra event binding, property binding y string interpolation para una comunicación fluida en ambos sentidos.

¿Qué es two way data binding y por qué importa?

El two way data binding permite que los cambios en el HTML actualicen la variable en TypeScript y, a la vez, que los cambios en TypeScript se reflejen en el HTML. Con ngModel y la combinación de paréntesis y corchetes, aceptas el bindeo en dos vías.

• Event binding: usa paréntesis para escuchar eventos del usuario.
• Property binding: usa corchetes para pasar valores a propiedades del HTML.
• String interpolation: usa llaves dobles para mostrar valores dinámicos.
• ngModel: combina ambos bindeos para sincronizar automáticamente.

¿Cómo se implementa con ngModel en Angular?

En el template se crea un input y un texto que muestra el valor usando string interpolation.

<hr />
<input type="text" placeholder="Tu nombre" [(ngModel)]="nombre" />
<p>Mi nombre es {{ nombre }}</p>

En el componente, se declara la variable antes del constructor e inicializada con cadena vacía. Puede tiparse como string.

export class MiComponente {
  nombre: string = '';
  // constructor() {}
}

• Clave: al teclear, el valor de nombre se actualiza automáticamente y se refleja en la vista sin código adicional en TypeScript.
• Ventaja: no necesitas leer manualmente el input ni gestionar eventos para actualizar la UI.

¿Cómo se integran event, property e interpolation en esta sintaxis?

La sintaxis [(ngModel)] conjuga paréntesis y corchetes en una sola notación. Así, el input emite cambios (como un evento) y también recibe el valor desde la propiedad de la clase, mientras la interpolación {{ nombre }} muestra el valor actual.

¿Qué módulo habilita ngModel y cómo evitar el error?

Si ves un error al usar ngModel, falta importar el módulo de formularios. Angular no lo carga de forma automática: debes agregar FormsModule en app.module.ts dentro de imports y su importación correspondiente.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

• Importante: verifica que el editor haya agregado la línea de importación de FormsModule correctamente.
• Resultado: tras guardar y refrescar en Chrome, el two way data binding funciona como se espera.

¿Qué ejercicio práctico refuerza el aprendizaje?

Crea una segunda caja de texto y concatena ambos nombres en la vista.

• Agrega otro input con [(ngModel)] para nombre2.
• Muestra la concatenación: {{ nombre }} {{ nombre2 }}.
• Asegúrate de declarar nombre2 en la clase e inicializarlo con ''.

¿Ya lo intentaste? Comparte tu solución y dudas en los comentarios.