Property Binding

Binding con corchetes []

El property binding es una técnica fundamental en Angular que permite enlazar dinámicamente las propiedades del componente TypeScript con las propiedades de los elementos HTML en el template. Se identifica por el uso de corchetes cuadrados [] alrededor del nombre de la propiedad del elemento.

A diferencia de la interpolación que vimos anteriormente, el property binding está diseñado específicamente para establecer propiedades de elementos HTML y no solo mostrar texto. Mientras que {{ valor }} es ideal para mostrar contenido textual, [propiedad]="valor" es la forma correcta de modificar propiedades como estados, URLs, clases CSS y otros atributos dinámicos.

Sintaxis básica

La sintaxis del property binding sigue un patrón simple: el nombre de la propiedad HTML entre corchetes, seguido de una expresión TypeScript:

<elemento [propiedad]="expresionTypeScript">

La expresión TypeScript se evalúa en el contexto del componente y puede incluir propiedades, métodos, operaciones matemáticas o cualquier expresión válida de TypeScript.

Ejemplos prácticos con propiedades comunes

Manejo de imágenes dinámicas:

export class ProductoComponent {
  imagenProducto = 'assets/producto-destacado.jpg';
  textoAlternativo = 'Producto destacado del mes';
}

<img [src]="imagenProducto" [alt]="textoAlternativo">

Control de estados de elementos:

export class FormularioComponent {
  formularioEnviado = false;
  cargando = true;
  
  enviarFormulario() {
    this.formularioEnviado = true;
  }
}

<button [disabled]="cargando">Enviar datos</button>
<div [hidden]="!formularioEnviado">¡Formulario enviado correctamente!</div>

Aplicación dinámica de clases CSS:

export class AlertaComponent {
  tipoAlerta = 'success';
  mostrarAlerta = true;
}

<div [class]="'alert alert-' + tipoAlerta" [hidden]="!mostrarAlerta">
  Operación completada exitosamente
</div>

Binding de estilos inline

El property binding también permite aplicar estilos CSS directamente desde el componente:

export class BarraProgresoComponent {
  progreso = 75;
  colorBarra = '#28a745';
}

<div class="progress-bar" 
     [style.width.%]="progreso"
     [style.background-color]="colorBarra">
  {{ progreso }}%
</div>

Expresiones y operaciones

Las expresiones dentro del property binding pueden incluir operaciones lógicas y cálculos:

export class CalculadoraComponent {
  numero1 = 10;
  numero2 = 5;
  mostrarResultado = true;
}

<input [value]="numero1 + numero2" [disabled]="!mostrarResultado">
<button [class.btn-primary]="numero1 > numero2">
  Número mayor
</button>

Diferencias clave con la interpolación

Mientras que la interpolación {{ }} convierte todo a string y es ideal para mostrar contenido textual, el property binding mantiene los tipos de datos originales. Esto es especialmente importante para propiedades booleanas:

<!-- ✅ Correcto: mantiene el tipo boolean -->
<button [disabled]="formularioInvalido">Enviar</button>

<!-- ❌ Incorrecto: convierte a string -->
<button disabled="{{ formularioInvalido }}">Enviar</button>

El property binding es más eficiente para valores no-string como objetos, arrays, números y booleanos, ya que Angular no necesita realizar conversiones de tipo innecesarias.

Casos de uso comunes en aplicaciones reales

Enlaces de navegación dinámicos:

export class MenuComponent {
  rutaActual = '/dashboard';
  usuarioLogueado = true;
}

<a [href]="usuarioLogueado ? '/perfil' : '/login'">Mi cuenta</a>

Configuración de formularios:

export class ConfiguradorComponent {
  configuracion = {
    placeholder: 'Introduce tu email',
    maxLength: 50,
    required: true
  };
}

<input [placeholder]="configuracion.placeholder"
       [maxlength]="configuracion.maxLength"
       [required]="configuracion.required">

El property binding se convierte así en una herramienta esencial para crear interfaces dinámicas que respondan al estado de la aplicación, permitiendo que los elementos HTML reflejen automáticamente los cambios en los datos del componente.

Atributos y propiedades DOM

Una de las distinciones más importantes en Angular es comprender la diferencia entre los atributos HTML y las propiedades del DOM. Esta diferencia determina cuándo usar property binding [propiedad] versus attribute binding [attr.atributo].

Diferencias fundamentales

Los atributos HTML son valores estáticos definidos en el markup HTML inicial, mientras que las propiedades DOM son valores dinámicos del objeto JavaScript que representa el elemento en el navegador. Cuando el navegador parsea HTML, convierte atributos en propiedades, pero estas pueden divergir después de la inicialización.

export class EjemploComponent {
  valorInicial = 'texto inicial';
  valorActual = 'texto modificado';
}

<!-- Property binding: modifica la propiedad DOM -->
<input [value]="valorActual">

<!-- Attribute binding: modifica el atributo HTML -->
<input [attr.value]="valorInicial">

Cuándo usar property binding

El property binding es la opción predeterminada y más común. Se utiliza cuando queremos modificar propiedades que el DOM reconoce y maneja automáticamente:

export class ControlComponent {
  deshabilitado = true;
  textoBoton = 'Procesar';
  claseCSS = 'btn btn-primary';
}

<button [disabled]="deshabilitado" [textContent]="textoBoton">
</button>

<div [className]="claseCSS">Contenido dinámico</div>

<img [src]="'assets/imagen-' + tipoImagen + '.jpg'">

Las propiedades DOM se actualizan inmediatamente cuando cambia el valor en el componente, y el navegador maneja automáticamente la sincronización visual.

Cuándo usar attribute binding

El attribute binding con [attr.nombreAtributo] se utiliza en situaciones específicas donde necesitamos trabajar directamente con atributos HTML:

Para atributos que no tienen propiedades DOM equivalentes:

export class AccesibilidadComponent {
  descripcionAria = 'Botón para cerrar modal';
  nivelTitulo = '2';
  idUnico = 'modal-' + Math.random().toString(36);
}

<button [attr.aria-label]="descripcionAria">×</button>

<h1 [attr.aria-level]="nivelTitulo">Título principal</h1>

<div [attr.id]="idUnico">Contenido único</div>

Para atributos de datos personalizados:

export class MetadatosComponent {
  tipoElemento = 'producto';
  categoriaId = '42';
  estadoElemento = 'activo';
}

<article [attr.data-tipo]="tipoElemento" 
         [attr.data-categoria]="categoriaId"
         [attr.data-estado]="estadoElemento">
  Contenido del artículo
</article>

Casos especiales importantes

Atributos booleanos como colspan y rowspan:

export class TablaComponent {
  columnasSpan = 3;
  filasSpan = 2;
  mostrarCelda = true;
}

<table>
  <tr>
    <td [attr.colspan]="mostrarCelda ? columnasSpan : null">
      Celda que ocupa múltiples columnas
    </td>
  </tr>
  <tr>
    <td [attr.rowspan]="filasSpan">Celda vertical</td>
  </tr>
</table>

SVG y elementos personalizados:

export class GraficoSVGComponent {
  coordenadaX = 50;
  coordenadaY = 100;
  radioCirculo = 25;
}

<svg>
  <circle [attr.cx]="coordenadaX" 
          [attr.cy]="coordenadaY" 
          [attr.r]="radioCirculo">
  </circle>
</svg>

Manejo de valores null y undefined

Una característica importante del attribute binding es que elimina el atributo cuando el valor es null o undefined:

export class CondicionalComponent {
  mostrarDescripcion = false;
  
  toggleDescripcion() {
    this.mostrarDescripcion = !this.mostrarDescripcion;
  }
}

<div [attr.title]="mostrarDescripcion ? 'Descripción disponible' : null">
  Contenido con tooltip condicional
</div>

Cuando mostrarDescripcion es false, el atributo title se elimina completamente del elemento, no se establece como vacío.

Consideraciones de rendimiento

El property binding generalmente tiene mejor rendimiento porque Angular puede aprovechar las optimizaciones del navegador para actualizar propiedades DOM. El attribute binding requiere manipulación directa de atributos HTML, que puede ser ligeramente más costosa.

export class RendimientoComponent {
  elementosLista = Array.from({length: 1000}, (_, i) => ({
    id: i,
    activo: i % 2 === 0
  }));
}

<!-- Más eficiente para propiedades DOM conocidas -->
<div *ngFor="let item of elementosLista" [hidden]="!item.activo">
  Item {{ item.id }}
</div>

<!-- Necesario solo para atributos específicos -->
<div *ngFor="let item of elementosLista" [attr.data-id]="item.id">
  Item con metadatos
</div>

La regla general es usar property binding por defecto y recurrir a attribute binding solo cuando necesitemos trabajar con atributos específicos que no tienen equivalente en las propiedades DOM o cuando trabajemos con elementos SVG y componentes personalizados.