Interpolación en Angular

La interpolación es una forma de mostrar datos en la vista de un componente. Se utiliza la sintaxis de doble llave {{ }} para mostrar datos en la vista.

Para este capítulo vamos a crear un nuevo proyecto de Angular. Para ello, abrimos una terminal y ejecutamos el siguiente comando:

ng new interpolacion

Nos ubicamos en el directorio del proyecto:

cd interpolacion

Y ejecutamos el servidor de desarrollo:

ng serve -o

Crear un componente

Vamos a crear un nuevo componente llamado usuario. Para ello, ejecutamos el siguiente comando en la terminal:

ng generate component usuario

Interpolación

Vamos a mostrar el nombre de un usuario en la vista del componente usuario. Para ello, abrimos el archivo usuario.component.ts y agregamos la siguiente propiedad:

nombre: string = 'Diego';

Ahora, abrimos el archivo usuario.component.html y agregamos el siguiente código:

<p>Nombre: {{ nombre }}</p>

Guardamos los cambios y observamos el navegador. Deberíamos ver el nombre del usuario en la vista.

Para probar nuestro proyecto, vamos a recordar lo que aprendimos en el capítulo anterior. Agregamos nuestro componente usuario al archivo app.component.html:

<app-usuario></app-usuario>

Guardamos y agregamos el componente a las importaciones de la aplicación principal. Abrimos el archivo app.module.ts y agregamos el siguiente código:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
1import { UsuarioComponent } from './usuario/usuario.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
2    UsuarioComponent
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'interpolacion';
}
1
Importamos el componente UsuarioComponent.
2
Agregamos el componente UsuarioComponent a las importaciones de la aplicación.

Si todo está correcto, deberíamos ver el nombre del usuario en la vista.

Tip

Las propiedades solo pueden ser llamadas en las vistas de los componentes que las contienen. Si intentaramos llamar la propiedad nombre en el archivo app.component.html, obtendríamos un error.

Al utilizar typescript como lenguaje de programación las propiedades que definimos pueden ser de tipado estricto, es decir en el ejemplo anterior la propiedad nombre es de tipo string. Si intentamos asignar un valor de otro tipo a la propiedad obtendremos un error.

nombre: string = 10; // Error

En el ejemplo anterior se define la propiedad nombre como un número, pero se le asigna un valor de tipo string. Para corregir el error, debemos asignar un valor de tipo string a la propiedad nombre.

nombre: string = '10'; // Correcto

Recordemos los tipos de datos que podemos utilizar en typescript:

  • number: Números enteros o decimales.
  • string: Cadenas de texto.
  • boolean: Valores booleanos (true o false).
  • any: Cualquier tipo de dato.
  • Array: Arreglos de datos.
  • Object: Objetos.

Ahora vamos a intentar utilizar un objeto, en este caso un objeto de tipo Persona, para definirlo dentro del componente usuario y mostrar sus propiedades en la vista.

Modificamos el archivo usuario.component.ts y agregamos la siguiente propiedad:

import { Component } from '@angular/core';

@Component({
  selector: 'app-usuario',
  standalone: true,
  imports: [],
  templateUrl: './usuario.component.html',
  styleUrl: './usuario.component.css'
})
export class UsuarioComponent {
1  persona: any = {
2    nombre: 'Diego',
3    edad: 36,
4    direccion: {
5    calle: 'Calle 123',
6    ciudad: 'Quito'
    }
  }
}
1
Definimos la propiedad persona.
2
Definimos la propiedad nombre.
3
Definimos la propiedad edad.
4
Definimos la propiedad direccion.
5
Definimos la propiedad calle.
6
Definimos la propiedad ciudad.

En el ejemplo anterior, definimos un objeto de tipo Persona con las propiedades nombre, edad y direccion. La propiedad direccion es un objeto que contiene las propiedades calle y ciudad.

Ahora, abrimos el archivo usuario.component.html y agregamos el siguiente código:

<p>Nombre: {{ persona.nombre }}</p>
<p>Edad: {{ persona.edad }}</p>
<p>Dirección: {{ persona.direccion.calle }}, {{ persona.direccion.ciudad }}</p>

En el archivo usuario.component.html mostramos las propiedades nombre, edad y direccion del objeto persona. La propiedad direccion es un objeto que contiene las propiedades calle y ciudad.

Si todo está correcto, deberíamos ver el nombre, la edad y la dirección de la persona en la vista.

Ahora si nos fijamos bien nuestro objeto persona es de tipo any lo que significa que puede ser cualquier tipo de dato, pero si queremos que nuestro objeto persona sea de tipo Persona debemos crear una interfaz que defina las propiedades del objeto.

Vamos a crear una interfaz llamada Persona. Para ello, abrimos el archivo usuario.ts y agregamos la siguiente interfaz:

1export interface Persona {
2  nombre: string;
3  edad: number;
4  direccion: {
5    calle: string;
6    ciudad: string;
  }
}
1
Definimos la interfaz Persona.
2
Definimos la propiedad nombre.
3
Definimos la propiedad edad.
4
Definimos la propiedad direccion.
5
Definimos la propiedad calle.
6
Definimos la propiedad ciudad.

Ahora, modificamos la propiedad persona para que sea de tipo Persona. Para ello, abrimos el archivo usuario.component.ts y modificamos la propiedad persona de la siguiente manera:

import { Component } from '@angular/core';
import { Persona } from './usuario';

@Component({
  selector: 'app-usuario',
  standalone: true,
  imports: [],
  templateUrl: './usuario.component.html',
  styleUrl: './usuario.component.css'
})
export class UsuarioComponent {
  persona: Persona = {
    nombre: 'Diego',
    edad: 36,
    direccion: {
      calle: 'Calle 123',
      ciudad: 'Quito'
    }
  }
}
Tip

¿Qué conseguimos con esto?

Al definir la propiedad persona como un objeto de tipo Persona, estamos asegurando que el objeto persona tenga las propiedades nombre, edad y direccion. Si intentamos agregar una propiedad que no está definida en la interfaz Persona, obtendremos un error.

Si todo está correcto, deberíamos ver el nombre, la edad y la dirección de la persona en la vista.

Reto

Crea un nuevo proyecto de Angular llamado reto-interpolacion. Crea un nuevo componente llamado producto. Define un objeto de tipo Producto con las propiedades nombre, precio y descripcion. Muestra las propiedades del objeto producto en la vista del componente producto.

Solución
  1. Creamos un nuevo proyecto de Angular llamado reto-interpolacion.
ng new reto-interpolacion
  1. Nos ubicamos en el directorio del proyecto.
cd reto-interpolacion
  1. Creamos un nuevo componente llamado producto.
ng g c producto
  1. Definimos una interfaz llamada Producto en el archivo producto.ts.
export interface Producto {
  nombre: string;
  precio: number;
  descripcion: string;
}
  1. Modificamos el archivo producto.component.ts y definimos un objeto de tipo Producto.
import { Component } from '@angular/core';
import { Producto } from './producto';

@Component({
  selector: 'app-producto',
  standalone: true,
  imports: [],
  templateUrl: './producto.component.html',
  styleUrl: './producto.component.css'
})
export class ProductoComponent {
  producto: Producto = {
    nombre: 'Laptop',
    precio: 1000,
    descripcion: 'Laptop de última generación'
  }
}
<p>Nombre: {{ producto.nombre }}</p>
<p>Precio: {{ producto.precio }}</p>
<p>Descripción: {{ producto.descripcion }}</p>
  1. Agregamos el componente producto al archivo app.component.html.
<app-producto></app-producto>
  1. Agregamos el componente producto a las importaciones de la aplicación principal.
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ProductoComponent } from './producto/producto.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    ProductoComponent
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {
  title = 'reto-interpolacion';
}
ng serve -o

Si todo está correcto, deberíamos ver el nombre, el precio y la descripción del producto en la vista.

Conclusión

La interpolación es una forma de mostrar datos en la vista de un componente. Se utiliza la sintaxis de doble llave {{ }} para mostrar datos en la vista. Las propiedades solo pueden ser llamadas en las vistas de los componentes que las contienen. Al utilizar typescript como lenguaje de programación las propiedades que definimos pueden ser de tipado estricto. Si queremos que un objeto sea de un tipo específico, podemos definir una interfaz que defina las propiedades del objeto. Al definir un objeto como una interfaz, estamos asegurando que el objeto tenga las propiedades definidas en la interfaz.