馃馃徎 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 }}

<h3>2 + 2 es igual a {{2 + 2}}</h3>

se usan las dobles llaves {{}}, que visualmente se parece a un mostacho o bigote.

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: https://cdn2.thecatapi.com/images/49f.gif

Nos queda nuestro archivo con el siguiente c贸digo:

app.component.html
<h1>Interpolaci贸n</h1>
<h2>Reto b谩sico</h2>
<img src="https://cdn2.thecatapi.com/images/49f.gif" />

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:

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.

No modifiques nada m谩s del contenido de app.component.ts, la sintaxis que ves en ese archivo es la b谩sica de Angular.

Nos quedar谩 un c贸digo como el siguiente:

app.component.ts
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';
}

Usaremos una API de gifs animados para tener m谩s gifs animados en nuestra etiqueta <img />, colocaremos a nuestra variable img la url del API: https://thecatapi.com/api/images/get?format=src&type=gif

Paso 5

Asignaremos en nuestra etiqueta <img /> 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.

app.component.html
<h1>{{name}}</h1>
<h2>Reto b谩sico</h2>

<img src="{{img}}" />

Duplicamos la etiqueta <img /> 6 veces para tener nuestra galer铆a

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

app.component.ts
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=';
}

En nuestro HTML a la variable img le podemos concatenar un n煤mero para que la imagen de nuestro gato cambie.

app.component.html
<h1>{{name}}</h1>
<h2>Reto b谩sico</h2>

<img src="{{img+1}}" />
<img src="{{img+2}}" />
<img src="{{img+3}}" />
<img src="{{img+4}}" />
<img src="{{img+5}}" />
<img src="{{img+6}}" />

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 <img />, pero esto lo veremos en el pr贸ximo articulo.

Demo!!!

Puedes ver el ejercicio completo en la siguiente:

Last updated