Interpolación de datos

Text interpolation

La interpolación de texto es la forma más básica y fundamental de mostrar datos dinámicos del componente en las plantillas HTML de Angular. Utiliza la sintaxis de dobles llaves {{}} para evaluar expresiones TypeScript y renderizar su resultado directamente en el DOM.

Esta técnica permite que los valores del componente se reflejen automáticamente en la vista, creando una conexión reactiva entre la lógica del componente y lo que ve el usuario. Angular evalúa las expresiones dentro de las llaves en el contexto del componente actual, lo que significa que tienes acceso a todas sus propiedades y métodos públicos.

Sintaxis básica

La sintaxis de interpolación es simple y directa. Simplemente envuelve cualquier expresión TypeScript válida entre dobles llaves:

export class AppComponent {
  titulo = 'Mi aplicación Angular';
  usuario = 'María García';
  version = 20;
}

<h1>{{titulo}}</h1>
<p>Bienvenido, {{usuario}}</p>
<span>Versión: {{version}}</span>

Angular procesa estas expresiones durante la detección de cambios y actualiza el DOM automáticamente cuando los valores cambian. No necesitas escribir código adicional para mantener sincronizada la vista con los datos.

Expresiones y operaciones

La interpolación no se limita a mostrar propiedades simples. Puedes usar expresiones complejas que se evalúan en tiempo real:

export class ProductoComponent {
  precio = 299.99;
  descuento = 0.15;
  cantidad = 3;
  
  obtenerSaludo(): string {
    const hora = new Date().getHours();
    return hora < 12 ? 'Buenos días' : 'Buenas tardes';
  }
}

<!-- Operaciones matemáticas -->
<p>Precio original: €{{precio}}</p>
<p>Precio con descuento: €{{precio * (1 - descuento)}}</p>
<p>Total por {{cantidad}} unidades: €{{precio * cantidad}}</p>

<!-- Operaciones con strings -->
<h2>{{obtenerSaludo()}}, bienvenido</h2>
<p>Usuario: {{usuario.toUpperCase()}}</p>

<!-- Expresiones condicionales -->
<span>Estado: {{cantidad > 0 ? 'Disponible' : 'Agotado'}}</span>

Las expresiones se evalúan cada vez que Angular ejecuta la detección de cambios, asegurando que la vista siempre refleje el estado actual de los datos.

Concatenación y formateo

Puedes combinar texto estático con valores dinámicos para crear mensajes más ricos y descriptivos:

export class PerfilComponent {
  nombre = 'Ana';
  apellido = 'Martínez';
  edad = 28;
  profesion = 'Desarrolladora';
}

<!-- Concatenación simple -->
<h1>Hola, {{nombre + ' ' + apellido}}</h1>

<!-- Combinando con texto estático -->
<p>{{nombre}} tiene {{edad}} años y es {{profesion}}</p>

<!-- Template literals dentro de interpolación -->
<p>{{ `${nombre} (${edad} años) - ${profesion}` }}</p>

<!-- Formateo de números -->
<span>Progreso: {{(75.6789).toFixed(1)}}%</span>

Esta flexibilidad te permite crear contenido dinámico sin necesidad de manipular directamente el DOM o usar librerías externas para formateo básico.

Llamadas a métodos

La interpolación puede ejecutar métodos del componente para obtener valores calculados o formatear datos:

export class PedidoComponent {
  productos = [
    { nombre: 'Laptop', precio: 899 },
    { nombre: 'Mouse', precio: 25 },
    { nombre: 'Teclado', precio: 75 }
  ];
  
  calcularTotal(): number {
    return this.productos.reduce((sum, producto) => sum + producto.precio, 0);
  }
  
  formatearFecha(fecha: Date): string {
    return fecha.toLocaleDateString('es-ES');
  }
  
  obtenerDescripcionPedido(): string {
    return `Pedido con ${this.productos.length} artículos`;
  }
}

<div>
  <h3>{{obtenerDescripcionPedido()}}</h3>
  <p>Total: €{{calcularTotal()}}</p>
  <p>Fecha: {{formatearFecha(new Date())}}</p>
  
  <!-- Métodos con parámetros -->
  <p>IVA incluido: €{{(calcularTotal() * 1.21).toFixed(2)}}</p>
</div>

Ten en cuenta que los métodos se ejecutan en cada ciclo de detección de cambios, por lo que es recomendable que sean ligeros y no realicen operaciones costosas.

Contexto de evaluación

Las expresiones de interpolación se evalúan en el contexto del componente, lo que significa que tienes acceso directo a todas las propiedades y métodos públicos:

export class DashboardComponent {
  private configuracion = { tema: 'oscuro' }; // No accesible desde el template
  public usuario = 'Admin';                   // Accesible desde el template
  public estadisticas = {
    visitas: 1250,
    usuarios: 45,
    ventas: 890.50
  };
  
  get temaActual(): string {
    return this.configuracion.tema;
  }
}

<!-- Acceso a propiedades públicas -->
<h2>Dashboard de {{usuario}}</h2>

<!-- Acceso a propiedades anidadas -->
<p>Visitas hoy: {{estadisticas.visitas}}</p>
<p>Usuarios activos: {{estadisticas.usuarios}}</p>

<!-- Acceso a getters -->
<div class="tema-{{temaActual}}">
  <p>Ventas: €{{estadisticas.ventas}}</p>
</div>

<!-- Esto NO funcionaría: {{configuracion.tema}} -->
<!-- porque configuracion es privada -->

Angular actualiza automáticamente cualquier interpolación cuando detecta cambios en las propiedades referenciadas, manteniendo la vista sincronizada con el estado del componente sin intervención manual.

Sintaxis y casos de uso

Restricciones y limitaciones sintácticas

La interpolación de texto tiene ciertas limitaciones que es importante conocer para utilizarla correctamente. No todas las expresiones TypeScript son válidas dentro de las dobles llaves:

export class EjemplosComponent {
  contador = 5;
  items = ['manzana', 'pera', 'naranja'];
  usuario = { nombre: 'Juan', activo: true };
}

<!-- ✅ Expresiones válidas -->
<p>{{contador + 10}}</p>
<p>{{items.length}}</p>
<p>{{usuario.nombre || 'Invitado'}}</p>
<p>{{Math.max(1, 2, 3)}}</p>

<!-- ❌ Expresiones NO válidas -->
<!-- <p>{{let resultado = contador * 2}}</p> --> <!-- Declaraciones -->
<!-- <p>{{if (contador > 0) { return 'positivo' }}}</p> --> <!-- Statements -->
<!-- <p>{{items.forEach(item => console.log(item))}}</p> --> <!-- Side effects -->
<!-- <p>{{new Date().setFullYear(2025)}}</p> --> <!-- Mutaciones globales -->

Las expresiones de interpolación deben ser seguras y sin efectos secundarios. Angular evalúa estas expresiones múltiples veces durante el ciclo de vida del componente, por lo que deben ser idempotentes.

Casos de uso en interfaces de usuario

La interpolación es especialmente útil en escenarios comunes de desarrollo de interfaces:

1 - Mensajes dinámicos y notificaciones:

export class NotificacionComponent {
  tipoMensaje = 'success';
  cantidadElementos = 3;
  nombreArchivo = 'documento.pdf';
  
  obtenerMensajeEstado(): string {
    const mensajes = {
      'success': 'Operación completada exitosamente',
      'warning': 'Revisa los datos antes de continuar',
      'error': 'Ha ocurrido un problema inesperado'
    };
    return mensajes[this.tipoMensaje] || 'Estado desconocido';
  }
}

<div class="notificacion {{tipoMensaje}}">
  <p>{{obtenerMensajeEstado()}}</p>
  <span>{{nombreArchivo}} procesado ({{cantidadElementos}} elementos)</span>
</div>

2 - Información de estado y progreso:

export class ProgresoComponent {
  progreso = 65;
  totalTareas = 20;
  tareasCompletadas = 13;
  tiempoRestante = 450; // segundos
  
  get porcentajeProgreso(): string {
    return `${((this.tareasCompletadas / this.totalTareas) * 100).toFixed(1)}%`;
  }
  
  get tiempoFormateado(): string {
    const minutos = Math.floor(this.tiempoRestante / 60);
    const segundos = this.tiempoRestante % 60;
    return `${minutos}:${segundos.toString().padStart(2, '0')}`;
  }
}

<div class="barra-progreso">
  <div class="progreso" style="width: {{porcentajeProgreso}}">
    {{porcentajeProgreso}}
  </div>
  <p>{{tareasCompletadas}} de {{totalTareas}} tareas completadas</p>
  <span>Tiempo restante: {{tiempoFormateado}}</span>
</div>

3 - Datos de usuario y personalización:

export class PerfilUsuarioComponent {
  usuario = {
    nombre: 'María',
    apellidos: 'González López',
    email: 'maria.gonzalez@empresa.com',
    ultimaConexion: new Date('2024-12-15T10:30:00'),
    configuracion: {
      idioma: 'es',
      zona: 'Europe/Madrid'
    }
  };
  
  get nombreCompleto(): string {
    return `${this.usuario.nombre} ${this.usuario.apellidos}`;
  }
  
  get ultimaConexionFormateada(): string {
    return this.usuario.ultimaConexion.toLocaleString('es-ES');
  }
}

<header class="perfil">
  <h1>Bienvenido, {{usuario.nombre}}</h1>
  <p>{{nombreCompleto}} - {{usuario.email}}</p>
  <small>Última conexión: {{ultimaConexionFormateada}}</small>
  <span>Configuración: {{usuario.configuracion.idioma}}/{{usuario.configuracion.zona}}</span>
</header>

Interpolación en atributos y contenido mixto

Aunque la interpolación está diseñada principalmente para contenido de texto, puede combinarse creativamente con atributos HTML estándar:

export class GaleriaComponent {
  imagenes = [
    { url: '/assets/foto1.jpg', alt: 'Paisaje montañoso', titulo: 'Montañas' },
    { url: '/assets/foto2.jpg', alt: 'Playa tropical', titulo: 'Playa' }
  ];
  indiceActual = 0;
  
  get imagenActual() {
    return this.imagenes[this.indiceActual];
  }
}

<!-- Contenido de texto con interpolación -->
<div class="galeria">
  <h3>{{imagenActual.titulo}}</h3>
  <p>Imagen {{indiceActual + 1}} de {{imagenes.length}}</p>
  
  <!-- Nota: Para atributos src, alt, etc. se usa property binding, 
       no interpolación directa en atributos -->
  <img [src]="imagenActual.url" [alt]="imagenActual.alt">
  
  <!-- Interpolación en contenido de texto -->
  <figcaption>{{imagenActual.alt}} - Foto {{indiceActual + 1}}</figcaption>
</div>

Buenas prácticas y rendimiento

Para usar la interpolación de forma eficiente y mantenible, considera estas recomendaciones:

1 - Evita lógica compleja en templates:

export class ProductosComponent {
  productos = [
    { nombre: 'Laptop', precio: 1200, categoria: 'tecnologia' },
    { nombre: 'Libro', precio: 25, categoria: 'educacion' }
  ];
  
  // ✅ Buena práctica: lógica en el componente
  get productosCaros(): number {
    return this.productos.filter(p => p.precio > 100).length;
  }
  
  get categoriasPrincipales(): string {
    const cats = [...new Set(this.productos.map(p => p.categoria))];
    return cats.join(', ');
  }
}

<!-- ✅ Template limpio y legible -->
<div>
  <p>Total productos: {{productos.length}}</p>
  <p>Productos premium: {{productosCaros}}</p>
  <p>Categorías: {{categoriasPrincipales}}</p>
</div>

<!-- ❌ Evita lógica compleja en el template -->
<!-- <p>Productos caros: {{productos.filter(p => p.precio > 100).length}}</p> -->

2 - Usa métodos con precaución:

export class ListaComponent {
  elementos = ['A', 'B', 'C'];
  
  // ✅ Getter para valores calculados simples
  get cantidadElementos(): number {
    return this.elementos.length;
  }
  
  // ⚠️ Método que se ejecuta en cada detección de cambios
  obtenerFechaActual(): string {
    console.log('Método ejecutado'); // Se verá muchas veces
    return new Date().toISOString();
  }
  
  // ✅ Mejor opción: calcular una vez y almacenar
  fechaCreacion = new Date().toISOString();
}

<div>
  <!-- ✅ Getter eficiente -->
  <p>Cantidad: {{cantidadElementos}}</p>
  
  <!-- ⚠️ Método que se ejecuta frecuentemente -->
  <p>Ahora: {{obtenerFechaActual()}}</p>
  
  <!-- ✅ Valor calculado una vez -->
  <p>Creado: {{fechaCreacion}}</p>
</div>

3 - Manejo de valores null y undefined:

export class DatosComponent {
  usuario: { nombre?: string; edad?: number } | null = null;
  configuracion?: { tema: string };
}

<!-- ✅ Protección contra valores null/undefined -->
<div>
  <h2>{{usuario?.nombre || 'Usuario no disponible'}}</h2>
  <p>Edad: {{usuario?.edad ?? 'No especificada'}}</p>
  <span>Tema: {{configuracion?.tema || 'Por defecto'}}</span>
</div>

<!-- ✅ Usando el operador de navegación segura -->
<p>Datos: {{usuario?.nombre}} ({{usuario?.edad}} años)</p>

<!-- ❌ Evita esto sin protección -->
<!-- <p>{{usuario.nombre}}</p> --> <!-- Error si usuario es null -->

La interpolación es la herramienta fundamental para mostrar datos dinámicos en Angular, pero debe usarse conscientemente para mantener templates limpios y aplicaciones con buen rendimiento.