Tipos de Data Binding y String Interpolation

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:005:05

Tipos de Data Binding y String Interpolation

Curso de Angular 4

Clase 10 de 80

Clase 10 / 80

Recursos

La interfaz que ve el cliente es decisiva. Con data binding en Angular, conectas el código con la vista para que los cambios parezcan inmediatos y la experiencia sea fluida. Aunque la lógica sea eficiente, si la UI luce mal o tarda en actualizar, el usuario pensará que todo está mal. Aquí verás cómo funciona y cómo aplicar string interpolation paso a paso.

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

El data binding es la comunicación entre el código y lo que ve el cliente. Su objetivo es presentar datos de forma clara y en tiempo oportuno, dando sensación de inmediatez.

Hay cuatro maneras de comunicar datos en Angular.
string interpolation: de TypeScript hacia HTML para mostrar valores o expresiones.
property binding: desde HTML hacia TypeScript con valores ingresados por el usuario o por defecto.
event binding: escucha eventos en HTML y pasa la información a TypeScript.
two-way data binding: comunicación de dos vías entre la vista y TypeScript.

¿Cómo funciona la string interpolation en el template?

La string interpolation muestra valores definidos en TypeScript dentro del HTML usando llaves dobles. Es ideal para texto dinámico y operaciones simples.

¿Cómo declarar y mostrar variables?

En el componente principal ya existe un ejemplo con la variable title. El HTML muestra “Welcome to {{ title }}” y refleja el valor definido en TypeScript.

// app.component.ts
export class AppComponent {
  title = 'Classy square'; // Cambia y se refleja en la vista.
  a = 3;
  b = 5;
}

<!-- app.component.html -->
<h1>Welcome to {{ title }}</h1>
<p>Resultado: {{ a + b }}</p>

Idea clave: si cambias title a "Classy square", el texto en pantalla cambia de inmediato.
Puedes definir más variables (a, b) para mostrarlas o combinarlas en la vista.

¿Qué operaciones básicas puedes hacer?

La interpolación no solo muestra texto literal. También admite operaciones sencillas de programación.

Sumas: {{ a + b }} para ver el resultado.
Concatenaciones simples: unir texto con variables.
Lectura directa de valores: {{ title }}.

¿Qué sintaxis debes respetar?

La sintaxis es crítica para que funcione correctamente.

Usa siempre dobles llaves: {{ ... }}.
Sin llaves, HTML imprime el texto literal. Por ejemplo, a + b se mostrará como “a más b”.
Dentro de {{ }} coloca expresiones válidas y seguras desde TypeScript.

¿Dónde editar el componente principal?

El punto de partida está en los archivos propios del componente app.

Carpeta de trabajo: source/app.
HTML del componente: app.component.html.
Lógica y variables: app.component.ts.
El proyecto se generó con el comando de ngNew y se edita principalmente dentro de app.
Lo que ves en el navegador (“Welcome to app”, textos de ejemplo) corresponde a lo que hay en app.component.html.
Habilidad clave: identificar qué parte de la UI corresponde a cada archivo del componente.
Concepto clave: mantener la vista sincronizada con el estado de TypeScript usando {{ }}.

¿Te gustaría ver más casos con property binding, event binding o two-way data binding aplicados a formularios y eventos? Cuéntame en los comentarios qué ejemplo necesitas y lo construimos paso a paso.

Edgar Francisco San Juan Herrera

Hace 9 años

¿Qué es Data Binding?

Comunicación entre tú código TypeScript y el HTML.

Lo único que al cliente (La empresa que nos contrató) le importa es lo que ve, así que comunicar nuestra lógica (TypeScript) al template (HTML) es de suma importancia. Nuestro proyecto debe de estar presentable y hacerle sentir al cliente que todo va perfecto usando Data Binding.

Tipos de Data Binding en Angular 4.

String Interpolation {{}} TypeScript => HTML: Tener información (Variable, Array, por ejemplo) y presentarla a los usuarios en modo de HTML.

Property Binding [] TypeScript <= HTML: Información del lado de HTML que puede ser por ejemplo, información que el usuario ingrese o que nosotros pongamos un valor por defecto. Viajando la información de HTML a TypeScript.

Event Binding [] TypeScript <= HTML: Escuchar eventos desde HTML y pasarlo a TypeScript.

Two Way Data Binding [()] TypeScript <=> HTML: Comunicación de dos Vías. De lo que el cliente ve a TypeScript como de TypeScript hacia lo que el cliente ve.

En String Interpolation es importante respetar la sintaxis para que HTML pueda entender TypeScript. La sintaxis es {{nombre}}. Las dos llaves son importantes.

Gianni Maggiora

Hace 8 años

Tendrían que editar el Event Binding porque es ()

Alejandro Castaño Garcés

Hace 8 años

Buen aporte mi rey!!

Comentarios (33)33 comentarios

Víctor Hugo Rivas Sánchez

Hace 7 años

Antonio Luis Gil Rodríguez

Juan Carlos Santamaria Villegas

Raul Contreras

Estiben Castellanos

ARTURO CASTRO RAMÍREZ

Carlos Uriel de Jesus Sánchez González

MARIANELA ESPINOSA REYES

Hace 5 años

Jherom Chacon

Raúl Martín Anaya Rojo

Jair Israel Avilés Eusebio

Cristian Palta

Usuario anónimo

User

Pablo Rivero

juan david jaramillo zuñiga

Daniel Altamar

Diego Forero

Team Platzi

Edwar Enrique Vilchez Serrano

Daniel Roldan Chavez

Martha Muñoz

Carlos Ferrer

Alejandro Valenzuela

Carlos Enrique Ramírez Flores

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