Property Binding

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:04

Property Binding

Curso de Angular 4

Clase 11 de 80

Clase 11 / 80

Recursos

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.

Nelson Eduardo Visbal Jensen

Hace 9 años

Otro binding disponible que se puede usar es el del “src” en un tag de imagen

Y en el archivo app.component.ts podríamos tener algo como esto:

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
title = ‘app’;
variableImagenRuta = “data:image/png;base64,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”
}

Comentarios (41)41 comentarios

Jose R. Torrens Acosta

Yesica Lizeth Cortés Pineda

Jesus Sandrea

Eduardo Flores

Mon Avellaneda

José Luis Raffalli

Ellery Sammy Valest Torres

Germán David Santa Cruz

Marcelo Fontana

Diego Burlando

Carlos Acevedo

Rodolfo Sáenz

Hace 8 años

SocialLink Organizaciones Visibles

Hace 7 años

César Espitia

Alan Fermin

Felipe de Jesús Galindo Aguilar

Alan Martín Revillagigedo Tulais

Cristian Palta

Jherom Chacon

Matias Oliva

Noé Muñoz

David Daniel Castillo Nava

Juan Carlos Pinzón

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina