Desafío #3: 👮 Directiva

Ahora, todos sabemos que no todos prefieren los gatos, hay quienes se quedan con los perros 🐶, definiremos esto con el próximo desafío.

Para esto, haremos una aplicación en Angular que nos muestre una imagen de un perro o de un gato dependiendo de lo que escribas en un campo de texto 🏆.

Paso #1 ⭐

Primero, vamos a borrar el contenido del archivo app.component.html ubicado, en la carpeta app. Y en su lugar, colocaremos el título de nuestra aplicación:

<h1> Gato o Perro App </h1>
<p> Qué prefieres? </p>

Paso #2 🐻

Ahora, vamos a crear el campo de texto en el que escribiremos el animal de nuestra preferencia 🐶🐱, esto se hace con la etiqueta input.

Debajo de nuestro título, agregaremos:

<input type="text"/>

Paso #3 😁

Ahora, agregaremos una imagen de un perro y un gato, recuerda que el objetivo final es que podamos ver solo la de nuestro animal favorito 😉.

Para obtener las imágenes de los perros y gatos utilizaremos the dog API y the cat API. Utilizarlas es sencillo 😉.

Vamos a crear dos imágenes con la etiqueta img tal como lo hicimos en el reto anterior y en el atributo src colocaremos la siguiente ruta:

https://thecatapi.com/api/images/get?format=src&type=gif

y en la otra:

https://api.thedogapi.com/v1/images/search?format=src&mime_types=image/gif

Ahora, debes ver una imagen al azar de un perro y un gato. No obstante, únicamente queremos ver nuestro animal favorito 🤔

Paso #4 🎃

Para saber qué imagen mostrar, primero debemos saber qué animal escribiste en el campo de texto, para esto, abriremos el archivo app.component.ts y crearemos una variable llamada animal. En ésta guardaremos el nombre del animal ingresado.

Para crearla solo reemplaza la línea

name = 'Angular';

por:

animal = '';

app.component.ts es el archivo en el que se maneja la lógica del componente app

Paso #5 🐕

Ahora, para conectar el campo de texto con la variable animal utilizaremos la directiva de Angular ngModel. Las directivas, son atributos que Angular permite para agregarle super poderes a las etiquetas HTML.

Agregar [(ngModel)]="animal" dentro de la etiqueta input hará que lo que escribamos en el campo de texto sea automáticamente asignado a la variable `animal`.

<input [(ngModel)]="animal" type="text">

Paso #6 🚀

Ahora vamos a indicarle a las imágenes que se muestren o se oculten dependiendo del contenido en el texto. 🎉

Para esto, utilizamos *ngIf otra directiva de Angular que permite mostrar una etiqueta de HTML sólo si cumple con la condición que se le indique.

En nuestro caso la condición sería que la variable animal sea igual a “perro” para la imagen del perro o “gato” para la del gato, así:

<img *ngIf="animal === 'gato'" ...>

Finalmente debería quedar así:

<img *ngIf="animal === 'gato'" src="https://thecatapi.com/api/images/get?format=src&type=gif">

Ahora haz lo mismo para la imagen del perro: 🐶

Voilà! Ahora tienes una aplicación que te muestra la imagen de tu animal favorito 🏆

Lo lograste 💪

Puedes revisar el ejercicio completo aquí: 👇

Has completado el desafío #3, ahora vamos a el desafío #4 👇