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:

fullscreen
<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.

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

fullscreen
<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.

fullscreen
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.