CursosEmpresasBlogLiveConfPrecios

Property Binding

Clase 11 de 80 • Curso de Angular 4

Clase anteriorSiguiente clase
Resumen

Aprende a controlar el estado de un botón con property binding en Angular: desde HTML hacia TypeScript, usando corchetes, la propiedad disabled y una actualización diferida con setTimeout. Este guía práctica muestra la diferencia con string interpolation, cómo usar una variable como listo y por qué el constructor de la clase es clave para inicializar comportamientos.

¿Qué es property binding en Angular y por qué importa?

El data binding conecta el código de TypeScript con el HTML. Ya se vio string interpolation (comunicación de TypeScript a HTML). Ahora, el property binding trabaja en la otra dirección: desde HTML hacia TypeScript, permitiendo enlazar propiedades del DOM con expresiones de TypeScript.

  • Usa corchetes para enlazar: [propiedad]="expresión".
  • Funciona con propiedades nativas como disabled en un botón.
  • Acepta expresiones de TypeScript: true, false, variables o funciones.

¿Cómo se escribe la sintaxis con corchetes en HTML?

Ejemplo básico con un botón y disabled:

<button [disabled]="true">click me</button>
  • Con true: el botón aparece en gris y no responde a clics.
  • Con false: el botón es cliqueable y cambia de color al presionarlo.

¿Cómo controlar disabled con una variable y expresiones en TypeScript?

Puedes enlazar disabled a una variable para reflejar el estado de la aplicación. Se usa una variable llamada listo que determina si el botón debe habilitarse.

listo = true; // o false según el estado inicial

<button [disabled]="!listo">click me</button>
  • listo = true: con [disabled]="!listo" el botón queda habilitado.
  • listo = false: el botón se deshabilita hasta que cambie el estado.
  • También puedes pasar una función completa en la expresión si lo necesitas.

¿Qué expresión usar: variable o función?

  • Variable simple: rápida y clara para estados binarios (true/false).
  • Expresión con negación: !listo para invertir el estado sin lógica extra.
  • Función: útil si la habilitación depende de varias condiciones.

¿Cómo simular cambios con constructor, setTimeout y arrow function?

Para simular que el servidor tarda en responder, se declara listo en false y se cambia a true tras 3 segundos usando el constructor de la clase con setTimeout. El constructor se ejecuta al cargarse la clase, ideal para inicializar comportamientos.

listo = false;

constructor() {
  setTimeout(() => {
    this.listo = true;
  }, 3000); // 3000 ms = 3 segundos
}
  • setTimeout: espera un tiempo antes de ejecutar una función.
  • Primer parámetro: función anónima con arrow function () => {}.
  • Segundo parámetro: milisegundos a esperar (por ejemplo, 3000).
  • this: referencia a la instancia de la clase; así se actualiza listo correctamente.

Con esto, el botón inicia deshabilitado y se habilita después de 3 segundos, mostrando en práctica cómo property binding refleja cambios de estado en la interfaz.

¿Te gustaría ver más ejemplos con eventos y acciones del usuario? Deja tus preguntas y comenta qué casos quieres practicar.

      Property Binding