July 4, 2024

Data Binding en Angular: qué es, tipos y cómo funciona realmente

  • Angular

Uno de los conceptos más importantes —y a la vez más infravalorados— en Angular es el binding. Entenderlo bien marca la diferencia entre escribir plantillas claras o acabar con vistas difíciles de mantener.

El binding es el mecanismo que permite conectar los datos de la lógica con la vista, y viceversa. Es la forma que tiene Angular de mantener sincronizado el estado de la aplicación con lo que el usuario ve en pantalla.

Qué es el binding

El binding es la comunicación entre:

  • el componente (clase TypeScript)
  • la plantilla (HTML)

Gracias al binding, Angular puede:

  • mostrar datos en la vista
  • reaccionar a eventos del usuario
  • actualizar el estado automáticamente

Angular trabaja principalmente con data binding unidireccional y bidireccional.

Interpolation binding

Es la forma más simple. Sirve para mostrar valores en la vista.

export class UserComponent {
  name = 'Pol';
}
<p>{{ name }}</p>

🧠 Debug mental

name = 'Pol'
{{ name }} // 'Pol'

Solo funciona desde el componente hacia la vista.

No permite lógica compleja ni asignaciones.

Property binding

Permite enlazar una propiedad del HTML con una expresión del componente.

export class ButtonComponent {
  isDisabled = true;
}
<button [disabled]="isDisabled">
  Guardar
</button>

🧠 Debug mental

isDisabled = true
[disabled] = true // botón deshabilitado

Aquí no se pasa texto, se pasa un valor real.

Diferencia clave con interpolation

<!-- ❌ incorrecto -->
<button disabled="{{ isDisabled }}"></button>

<!-- ✅ correcto -->
<button [disabled]="isDisabled"></button>

Interpolation convierte todo a string.

Property binding trabaja con tipos reales.

Event binding

Sirve para escuchar eventos del DOM y ejecutar lógica del componente.

export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }
}
<button (click)="increment()">
  Incrementar
</button>

<p>{{ count }}</p>

🧠 Debug mental

click()
increment()
count = 1

La comunicación va de la vista al componente.

Two-way binding

Combina property binding + event binding en una sola sintaxis.

Es bidireccional: vista ↔ componente.

export class FormComponent {
  username = '';
}
<input [(ngModel)]="username" />
<p>{{ username }}</p>

🧠 Debug mental

input.value = 'pol'
username = 'pol'

Cada cambio en el input actualiza la variable, y cada cambio en la variable actualiza la vista.

Angular traduce esto a:

<input
  [value]="username"
  (input)="username = $event.target.value"
/>

Attribute binding

Se usa cuando necesitas enlazar atributos HTML, no propiedades.

export class TableComponent {
  colSpan = 2;
}
<td [attr.colspan]="colSpan">
  Total
</td>

🧠 Debug mental

colSpan = 2
attr.colspan = "2"

Esto es útil cuando la propiedad no existe directamente en el DOM.

Class y Style binding

Permiten aplicar clases o estilos de forma dinámica.

Class binding

export class StatusComponent {
  isActive = true;
}
<div [class.active]="isActive"></div>

🧠 Debug mental

isActive = true
class="active"

Style binding

export class BoxComponent {
  width = 100;
}
<div [style.width.px]="width"></div>

🧠 Debug mental

width = 100
style="width: 100px"

Resumen visual de los tipos de binding

  • {{ }} → Interpolation (componente → vista)
  • [prop] → Property binding
  • (event) → Event binding
  • [(...)] → Two-way binding
  • [attr.xxx] → Attribute binding
  • [class.xxx] / [style.xxx] → Clases y estilos dinámicos

Errores comunes

  • Usar interpolation en lugar de property binding
  • Abusar del two-way binding sin necesidad
  • Meter lógica compleja en la plantilla
  • No entender el sentido del flujo de datos

Regla práctica:

solo muestras datos → interpolation

El binding es la base de cómo Angular conecta la vista con la lógica. No es solo sintaxis, es un modelo mental de flujo de datos.

Cuando entiendes bien cada tipo de binding y cuándo usarlo, las plantillas se vuelven más claras, el código más predecible y la aplicación mucho más fácil de mantener.

Escrito por Pol Valle

Escrito por Pol Valle

Me interesa especialmente desarrollar aplicaciones que no solo sean funcionales, sino también atractivas y fáciles de usar. Lo consigo aplicando principios SOLID, arquitectura limpia y testing para garantizar la calidad.