> For the complete documentation index, see [llms.txt](https://ngchallenges.gitbook.io/project/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ngchallenges.gitbook.io/project/interpolacion.md).
# 🧔🏻 Interpolación {{}} 🧔🏻
La interpolación es el concepto mas básico que se emplea en Angular.
## ¿Qué es la interpolación?
La interpolación es su definición más básica nos permite obtener la información definida en la lógica y mostrarla en el HTML.
En Interpolación se utiliza la sintaxis `{{ valor }}`
```markup
2 + 2 es igual a {{2 + 2}}
```
{% hint style="info" %}
se usan las dobles llaves {{}}, que visualmente se parece a un mostacho o bigote.
{% endhint %}
A la interpolación, se le conoce como interpolación de cadenas, también conocida en inglés como "string interpolation".
A su sintaxis se le conoce como "moustache syntax" o sintaxis de bigote
Lo que se coloca entre las dobles llaves son llamadas expresiones. Podemos crear expresiones simples y complejas.
Cualquier expresión al final de cuentas se convertirá en una cadena y eso es lo que se colocará en la vista del componente.
Podemos ver expresiones con operaciones matemáticas.
```
{{ 2 + 2 }}
```
Expresiones con operadores lógico de negación:
```
{{ !valor }}
```
Expresiones que son devueltas en un método de componente. Lo que devuelva ese método es lo que se colocará en el template.
```
{{ metodoComponente() }}
```
## Reto Básico
Vamos a crear una mini galería dónde usaremos el concepto de interpolación.
Para nuestra App vamos a seguir los siguientes pasos:
### Paso 1
Crearemos nuestro "**Hello Angular**", usando un IDE online como **Stackblitz**, podemos ver la guía de **Stackblitz** en la sección de "Guías útiles" .
Vamos a la página de **stackblitz.com** y creamos nuestra App de Angular.
### Paso 2
Vamos a ir al archivo "**app.component.html**", seleccionamos el contenido y lo borramos.
### Paso 3
En el archivo **app.component.html** vamos a colocar unas etiquetas para los títulos y una para una imagen.
Vamos a incluir en nuestra imagen la siguiente url de un gif animado:
Nos queda nuestro archivo con el siguiente código:
{% code title="app.component.html" %}
```
Interpolación
Reto básico
```
{% endcode %}
### Paso 4
Hemos añadido nuestra imagen, pero la idea es crear una mini galería con varias imágenes. Podemos duplicar la etiqueta de la imagen y tendríamos algo como esto:
![Duplicamos la etiqueta \![]()
](https://2661087327-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbFy569GFu09bPpzMDJ%2F-LnGC-9WTuSCkURfLzBy%2F-LnGCs6uBm7w0c0APRGT%2FScreen%20Shot%202019-08-26%20at%208.35.03%20PM.png?alt=media\&token=5106f770-f701-47e4-b707-93ae15fde0f5)
Usaremos la interpolación para la url de la imagen, entonces solo dejaremos una etiqueta de imagen y crearemos una variable en el archivo **app.component.ts**, llamada **img** donde pondremos la ruta de la imagen.
{% hint style="info" %}
No modifiques nada más del contenido de **app.component.ts**, la sintaxis que ves en ese archivo es la básica de Angular.
{% endhint %}
Nos quedará un código como el siguiente:
{% code title="app.component.ts" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
img = 'https://cdn2.thecatapi.com/images/49f.gif';
}
```
{% endcode %}
Usaremos una API de gifs animados para tener más gifs animados en nuestra etiqueta **\![]()
**, colocaremos a nuestra variable **img** la url del API: [https://thecatapi.com/api/images/get?format=src\&type=gif](https://thecatapi.com/api/images/get?format=src\&type=gif?results_per_page=)
### Paso 5
Asignaremos en nuestra etiqueta **\![]()
** la url almacenada en nuestra variable.
Cambiaremos el texto de la variable **name** y pondremos en su lugar el texto Interpolación y lo incluiremos en uno de los títulos.
{% code title="app.component.html" %}
```markup
{{name}}
Reto básico
```
{% endcode %}
Duplicamos la etiqueta \![]()
6 veces para tener nuestra galería
![Duplicamos la etiqueta \![]()
](https://2661087327-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbFy569GFu09bPpzMDJ%2F-LnGGEPzkW3BiA7S1rOs%2F-LnGGQ3KPH6KZbE2ohQ-%2FScreen%20Shot%202019-08-26%20at%209.19.33%20PM.png?alt=media\&token=4719f995-c3c6-405c-98d3-282efa3f2d5e)
### Paso 6
Ahora tenemos una galería con la imagen repetida, podemos tener diferentes imágenes añadiendo en nuestra variable **img** "?results\_per\_page=", esta modificación la hacemos en nuestro **app.component.ts**
{% code title="app.component.ts" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Interpolación';
img = 'https://thecatapi.com/api/images/get?format=src&type=gif?results_per_page=';
}
```
{% endcode %}
En nuestro HTML a la variable **img** le podemos concatenar un número para que la imagen de nuestro gato cambie.
{% code title="app.component.html" %}
```markup
{{name}}
Reto básico
```
{% endcode %}
Podemos cambiar el css de las imágenes para poder ver nuestras imágenes con el mismo alto.
Podemos editar más el CSS para hacer nuestra galería mucho más bonita, pero esto te queda de tarea.
Podemos usar más conceptos de Angular como las directivas para evitar duplicar las etiquetas \![]()
, pero esto lo veremos en el próximo articulo.
## Demo!!!
Puedes ver el ejercicio completo en la siguiente:
{% embed url="" %}