> For the complete documentation index, see [llms.txt](https://shecodes.gitbook.io/she-codes-angular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shecodes.gitbook.io/she-codes-angular/workshop-v.3/basico-1.md).

# Básico #1 - Directivas👮

## 💡 Introducción 💡

En este desafío haremos algo divertido aplicando conceptos básicos de Angular, en especial sobre directivas, los cuales iremos descubriendo a medida que realicemos cada uno de los pasos descritos abajo.  

**¡**[**Aquí puedes encontrar el demo**](https://buttons-emojis.stackblitz.io)**!**

¿Estás list@?

**¡¡¡Es hora de la Acción!!! 😝**

## Paso 1: **Creemos nuestra App de Angular** ⭐️

Primero iremos a el inicio de [**www.stackblitz.com**](https://stackblitz.com) y crearemos una App de Angular.

![Vamos al inicio de Stackblitz y damos click en el botón.](/files/-LfmF2EIn_D3rx1gxAJJ)

![Seleccionamos la opción de Angular](/files/-LfmFnfwUkx_kYXbVEwL)

![Verás algo como esto 👆](/files/-LfmGCMN4j_IokU0vzTP)

En la parte izquierda donde dice "Files", seleccionaremos el archivo llamado **app.component.html**. 

Dentro del archivo seleccionamos su texto, lo borramos (presionando la tecla delete de tu compu 💻) y guardamos los cambios, seleccionando en la parte superior la opción de '**Save**' 💾 o la tecla rápida **cmd** + **S** o en windows **Ctrl** + **S.** 

![](/files/-LfmHJVm7_7cFa8fmSA3)

## Paso 2: **Añadamos un título** 🏁

En el mismo archivo **app.component.html,** vamos a usar unas etiquetas o tags de **HTML** para poner un título.

Copiaremos lo siguiente en el archivo **app.component.html** 

{% code title="app.component.html" %}

```markup
<h1>🤪 Emoji 🤪</h1>
```

{% endcode %}

Deberías ver algo así: 👇

![Añadamos un título](/files/-Lslmo4IySorTJZdeJ4j)

{% hint style="info" %}
**¿Qué es una etiqueta?**��

Como lo vimos anteriormente, las etiquetas o tags son la forma de escribir código HTML, es la semántica del HTML. Son fragmentos de texto rodeados por corchetes angulares `< >,` que tienen funciones y usos específicos, existen muchas etiquetas como **\<div>\</div>**, **\<p>\</p>**, entre otras.

**\<h1>:** Es una etiqueta para los títulos más grandes
{% endhint %}

Existe un concepto en Angular que se llama la **interpolación**, la cual nos permite mostrar lo que definamos en la lógica, puede ser un título y mostrarlo en la vista o **HTML**.

Así que usaremos la interpolación para nuestro título.

En el archivo **app.component.ts**, vas a encontrar varias líneas de código, como el siguiente:

![app.component.ts](/files/-LsmEToTFjPFiuwih5ub)

Nuestro código lo pondremos dentro de las llaves que inician en la línea 8. Entonces modificaremos la variable **name** y le pondremos **title** y dentro de las comillas pondremos el texto que colocamos en nuestras etiquetas \<h1>\</h1>. Así:

{% 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  {
  title = '🤪 Emoji 🤪';
}
```

{% endcode %}

&#x20;

En el archivo de **app.component.html** dentro de las etiquetas \<h1>\</h1> pondremos nuestra variable definida. Así:

{% code title="app.component.html" %}

```markup
<h1>{{title}}</h1>
```

{% endcode %}

![Usando la interpolación](/files/-LsmGp3qGXhO6a5zW8h8)

## Paso 3: **Añadamos un botón** 🆒

En nuestra vista o **HTML** incluiremos no solo uno sino varios botones y en lugar de poner dentro de ellos texto, pondremos emojis.

Entonces manos a la obra 😀.

En nuestro **app.component.html** añadiremos las etiquetas de un botón, \<button>\</button> y repetiremos esta línea 3 veces y dentro de ella pondremos diferentes emojis.

{% code title="app.component.html" %}

```markup
<h1>{{title}}</h1>
<button></button>
```

{% endcode %}

![Añadamos nuestros botones](/files/-LsmMwwWVjZJxMuRfaVi)

Nuestro **app.component.html** quedaría así:

{% code title="app.component.html" %}

```markup
<h1>{{title}}</h1>
<button>😀</button>
<button>😢</button>
<button>🤪</button>
```

{% endcode %}

## Paso 4: Pongamos algunas Directivas

Las Directivas son unas instrucciones que nos permiten añadir ciertos comportamientos a nuestra vista. Comportamientos como mostrar u ocultar el código. nos permite recorrer una colección de datos, entre otros.

Entonces usaremos nuestros botones para que al darles clic nos muestre una imagen que represente el emoji de nuestro botón, y al dar clic nuevamente sobre el mismo botón la oculte. Seguiremos los siguientes pasos:

* Crearemos 3 variables llamadas: **happy**, **sad**, **crazy** y a todas les asignaremos el valor de false. Estas variables las pondremos debajo de nuestra variable title en nuestro **app.component.ts**.

{% hint style="info" %}
**Te recuerdo ¿Qué es una variable?** es como una caja, (donde puedes poner cosas 🎁). Ésta almacenará lo que nosotros queramos, textos, números, etc **👍**
{% endhint %}

{% 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  {
  title = '🤪 Emoji 🤪';
  happy= false;
  sad= false;
  crazy= false;
}

```

{% endcode %}

* Como queremos que al darle clic a nuestros botones este muestre u oculte una imagen, entonces debemos de añadirle a cada uno el evento clic (Este hace referencia a un concepto que se llama **Event Binding**).

{% hint style="info" %}
**Event Binding.** Ella nos permite agregar eventos a nuestra vista. En este caso utilizamos el evento de **Click**, pero pueden ser muchos tipos: **(keyup)**, **(change)**, **(resize)**, etc  💻
{% endhint %}

Entonces a nuestras etiquetas le  añadiremos el click, y le asignaremos a cada botón la variable que creamos respectiva a cada botón, pero para cambiar ese valor de **false**, le pondremos a cada una de nuestras variables el signo de admiración **!**, esto lo que hace es negar nuestra variable. Si nuestra variable tenia un valor de **true**, al darle clic esta se negara, significa que se convertirá en **false**. Si nuestra variable tenia asignado un **false**, al darle clic se negará en otras palabras se convertirá en **true**.&#x20;

![Añadiendo el click](/files/-Lsmp-Sr88NAg7I8ar3x)

{% code title="app.component.html" %}

```markup
<h1>{{title}}</h1>
<button (click)="happy=!happy">😀</button>
<button (click)="sad=!sad">😢</button>
<button (click)="crazy=!crazy">🤪</button>
```

{% endcode %}

Si damos clic en cada botón, visualmente no notaremos el cambio, así que es hora de poner nuestras imágenes.

* Colocaremos nuestras imágenes, para esto pondremos dentro de una etiqueta \<section>, la etiqueta \<img> (puedes usar la imagen que desees), como son tres botones pondremos 3 \<section>. Ubiquemos nuestras etiquetas debajo de cada etiqueta \<button>\</button>. Así:

![Coloquemos nuestra \<section> debajo de cada botón](/files/-LsmrT027h0ibMpjNT47)

El código que aparece en la imagen es el siguiente:

{% code title="app.component.html" %}

```markup
<h1>{{title}}</h1>
<button (click)="happy=!happy">😀</button>
<section>
  <img title="Happy" src="https://i.pinimg.com/originals/f2/ce/c9/f2cec98f06e8f66ff0bcfb2ffdb413eb.jpg" />
</section>
<button (click)="sad=!sad">😢</button>
<button (click)="crazy=!crazy">🤪</button>
```

{% endcode %}

* Dupliquemos el código de \<section> para los otros dos botones y le cambiamos el title de la imagen y el src.

Duplicado queda así:

{% code title="app.component.html" %}

```markup
<h1>{{title}}</h1>
<button (click)="happy=!happy">😀</button>
<section>
  <img title="Happy" src="https://i.pinimg.com/originals/f2/ce/c9/f2cec98f06e8f66ff0bcfb2ffdb413eb.jpg" />
</section>
<button (click)="sad=!sad">😢</button>
<section>
  <img title="Happy" src="https://i.pinimg.com/originals/f2/ce/c9/f2cec98f06e8f66ff0bcfb2ffdb413eb.jpg" />
</section>
<button (click)="crazy=!crazy">🤪</button>
<section>
  <img title="Happy" src="https://i.pinimg.com/originals/f2/ce/c9/f2cec98f06e8f66ff0bcfb2ffdb413eb.jpg" />
</section>
```

{% endcode %}

&#x20;Si cambiamos los title y el src, nos queda así:

![Coloquemos los otros \<section>](/files/-Lsmsmokw16KwWe0XZax)

Tu código debería quedar similar al siguiente, pero con las imágenes que hayas agregado de tu preferencia.

{% code title="app.component.html" %}

```markup
<h1>{{title}}</h1>
<button (click)="happy=!happy">😀</button>
<section>
  <img title="Happy" src="https://i.pinimg.com/originals/f2/ce/c9/f2cec98f06e8f66ff0bcfb2ffdb413eb.jpg" />
</section>
<button (click)="sad=!sad">😢</button>
<section>
  <img title="Sad" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/sad-dog-1537347496.jpg?resize=480:*" />
</section>
<button (click)="crazy=!crazy">🤪</button>
<section>
  <img title="Crazy" src="https://townsquare.media/site/757/files/2014/08/names.jpg" />
</section>
```

{% endcode %}

* Ahora que tenemos nuestras imágenes vamos a añadir la directiva encargada de ocultar y mostrar el contenido.&#x20;

Para ello en cada \<section> incluiremos el **\*ngIf**, esta directiva se encarga de ocultar o mostrar algo de acuerdo a la variable o función de la cual deseemos que se evalué algo.

Nosotros deseamos evaluar que si nuestras variables: **happy, sad, crazy** son verdaderas nos muestre la imagen que representa cada botón.

Para esa evaluación añadiremos en cada etiqueta nuestra directiva así:

```markup
<section *ngIf="happy">
```

Entonces por cada \<section> incluiremos un **\*ngIf** con su variable.

![Coloquemos la directiva \*ngIf](/files/-LsmuI8ifcc7Spl9zOVi)

Como muestra la imagen anterior, al añadir nuestra directiva se irá ocultando la imagen.

Si damos clic sobre cada botón mostrará y ocultara nuestra imagen.

![Probando el evento click](/files/-LsmwJ0fmQIpIWC278NR)

¡Felicitaciones hemos terminado el primer desafío básico!

🎉 ¡**LO LOGRASTE!** 🎉

{% hint style="info" %}
[**Aquí** ](https://stackblitz.com/edit/buttons-emojis)puedes encontrar el ejercicio resuelto.
{% endhint %}

## 😎 Tu Misión Especial 😎

Parece que nuestra aplicación está lista 😀.&#x20;

⭐️ Como vez la aplicación no luce tan bonita, entonces tu misión especial es ponerle algunos estilos ¡¡para que luzca super cool!! ⭐️

{% hint style="success" %}
Has completado el **desafío #1 de nivel básico**, ahora vamos al **desafío básico #2 👇**
{% endhint %}

{% hint style="info" %}
**Nota:**

Si necesitas mentoría con este ejercicio puedes contactar a:

Vanessa M. Aristizabal\
Twitter: @vanessamarely\
Correo: <vanessamarely@gmail.com>
{% endhint %}