7 - Enlace de propiedades (Property Binding)

El property binding es una herramienta poderosa en Angular que nos permite mantener sincronizadas las propiedades de una componente con las propiedades de elementos del DOM, facilitando así la creación de aplicaciones dinámicas e interactivas.

Vimos que para la captura de eventos en los elementos HTML disponemos entre paréntesis el evento y asociamos un método, para el enlace de propiedades debemos disponer entre corchetes el nombre de la propiedad y le asignamos un atributo definido en la clase.

Modifiquemos nuevamente el archivo 'app.component.ts' con el siguiente código:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  nombre = ''

  fijarNombre1() {
    this.nombre = 'Juan';
  }

  fijarNombre2() {
    this.nombre = 'Ana';
  }
}

Definimos un atributo llamado nombre, el cual se modifica en dos métodos.

El segundo archivo donde se encuentra la vista de la componente y donde definimos el property binding es app.component.html:

<div>
  <input type="button" (click)="fijarNombre1()" value="Juan">
  <input type="button" (click)="fijarNombre2()" value="Ana">
</div>
<input type="text" [value]="nombre">

Debemos disponer entre corchetes el nombre de la propiedad y asignarle el nombre del atributo definido en la clase:

<input type="text" [value]="nombre">

Cuando el operador presione cualquiera de los dos botones, al modificarse el atributo "nombre" en la clase, automáticamente se actualiza la vista con el valor asignado al atributo.

Si ejecutamos la aplicación y presionamos el primer botón:

Tener cuidado con la importancia de los corchetes que envuelven la propiedad:

<input type="text" [value]="nombre">

Si no disponemos los corchetes, recordemos que el navegador va a mostrar la cadena "nombre" dentro del control de entrada de datos:

<input type="text" value="nombre">

Y tenemos como resultado en la página: