# Básico 2: Creando mi perfil 👤
## 💡 Introducción 💡
¡Qué divertido fue aprender a usar imágenes de gatos!\
¡Ahora vayamos por la creación de nuestro propio perfil!
¿Te gustaría crear la base de lo que podría ser tu propio perfil en tu aplicación web? Vamos a crear un perfil, que muestre u oculte información según nuestros propios datos, así podremos personalizarlo ¡Cómo más nos guste! [**¡Aquí puedes encontrar el demo!**](https://stackblitz.com/edit/angular-mi-perfil)
## Paso 1: **Creemos nuestra App de Angular** ⭐️
Entra a **[www.stackblitz.com](http://www.stackblitz.com)**, y verás algo como esto:
## Paso 2: **Vamos a armar el esqueleto 💀👤**
Vamos a crear el entorno de nuestra aplicación. Para ello iremos al archivo **app.component.html** y borramos todo el contenido para adicionar lo siguiente:
{% code title="app.component.html" %}
```markup
```
{% endcode %}
Deberías hacer algo así, y tu resultado se deberá ver así:👇
{% hint style="info" %}
**Por si tienes alguna duda. Aquí te explicamos cómo funciona: 👷♀️**
**1.** La etiqueta **\*ngIf** es una directiva que incluye una condición basada en el valor de una variable que la contiene. Cuando la expresión se evalúa como verdadera, Angular realiza la visualización de la porción de código, y cuando es falsa o nula, Angular realiza la **NO** visualización de la porción de código.
{% endhint %}
## Paso 3: Reforcemos el concepto de \*ngIf 🤓
Vamos a suponer que deseamos filtrar la información que vamos a mostrar en nuestro perfil. ¿Cómo podremos lograr eso?
Adiciona este código en la línea 8 de tu archivo **app.component.html**
{% code title="app.component.html" %}
```markup
```
{% endcode %}
Deberías hacer algo así, y tu resultado se deberá ver así:👇
{% hint style="info" %}
**Por si tienes alguna duda. Aquí te explicamos cómo funciona: 👷♀️**
**1.** La etiqueta **\*ngIf** también nos permite realizar operaciones lógicas, tanto así, que podemos hacer que una condición haga que se visualice o no los datos. \
\
Si el número de following es mayor a 100 podré ver esta información, de lo contrario se ocultarán. \
Si el número de followers es mayor a 700 podré ver esta información, de lo contrario se ocultarán.
{% endhint %}
## Paso 4: Datos y más datos sin codificar tanto 🧙🏻♀️
Vamos a suponer que deseamos filtrar la información que vamos a mostrar en nuestro perfil. ¿Cómo podremos lograr eso?
Adiciona este código en la línea 16 de tu archivo **app.component.html**
{% code title="app.component.html" %}
```markup
{{strength.text}}
{{strength.level}}
```
{% endcode %}
Deberías hacer algo así, y tu resultado se deberá ver así:👇
{% hint style="info" %}
**Por si tienes alguna duda. Aquí te explicamos cómo funciona: 👷♀️**
**1.** La etiqueta **\*ngFor** es una directiva principal, nos permite crear listas de datos en nuestro HTML sin adicionar más lineas de código. Todo se genera dinámicamente según el tamaño de la lista de elementos a mostrar.
**2.** Veremos como se visualizará en pantalla el contenido de **strengths** sin necesidad de escribir una por una en el archivo **app.component.html.**
{% endhint %}
## Paso 5: Personalizo mi tarjeta sin esfuerzo 💅🏼
Vamos a hacer que de una lista de opciones solo se nos muestre una.
Para esto vamos a usar la directiva NgSwitch.
Adiciona este código en la línea 20 de tu archivo **app.component.html**
{% code title="app.component.html" %}
```markup
{{person.name}}
{{person.color}}
```
{% endcode %}
Deberías hacer algo así, y tu resultado se deberá ver así:👇
{% hint style="info" %}
**Por si tienes alguna duda. Aquí te explicamos cómo funciona: 👷♀️**
**1.** La etiqueta **\[ngSwitch]** es una directiva estructural que agrega o no código (mostrar u ocultar vistas) cuando la condición coincide con la expresión de cambio.
**2.** Veremos como se visualizará en pantalla el elemento siempre y cuando exista un valor pink expresado en el siguiente código **\*ngSwitchCase="'pink'"**.
{% endhint %}
## Paso 6: Vamos a adicionar la lógica 🧠
Ahora vamos a modificar el archivo **app.component.ts**, en este vamos a adicionar la declaración de variables que vimos en el archivo **app.component.html**.\
En este archivo vamos a reemplazar su contenido, por el siguiente código por este:
{% 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 = 'Alejandra Giraldo';
following = 5001;
followers = 10002;
strengths = [{ text: 'English', level: 'Basic' }, { text: 'HTML', level: 'High' }, { text: 'Testing', level: 'Low' }];
people = [
{
"name": "Vanessa M.",
"age": 16,
"color": 'red'
},
{
"name": "Carlos Angulo",
"age": 25,
"color": 'green'
},
{
"name": "Maleja",
"age": 21,
"color": 'pink'
}
];
}
```
{% endcode %}
Deberías hacer algo así, y tu resultado se deberá ver así:👇
{% hint style="info" %}
**Por si tienes alguna duda. Aquí te explicamos cómo funciona: 👷♀️**
**1.** Realizamos la declaración de variables para:\
**name:** línea 9 donde le asignamos un valor tipo string.\
**following:** línea 10 donde le asignamos un valor tipo entero.\
**followers:** línea 11 donde le asignamos un valor tipo entero.\
**strengths**: línea 13 donde le asignamos un valor tipo objeto, donde almacenamos la lista de fortalezas a visualizar en el perfil.\
**people:** línea 15 donde le asignamos un valor tipo objeto, donde almacenamos la lista de mejores amigos de tu perfil.
{% endhint %}
## Paso Final: Personaliza tu perfil 🎨
¡Vamos a hacer que nuestro perfil tenga color agregando CSS! \
¿Recuerdas las clases que usamos en nuestro **app.component.html**? \
¡Llegó el tiempo de usarlas! \
Reemplaza el contenido de **app.component.css** con éste:
{% code title="app.component.css" %}
```css
body {
background: #ededed;
font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
user-select: none;
}
.card {
width: 300px;
height: 550px;
margin: 0 auto;
background: #22313F;
border-radius: 4px;
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.25);
}
.profile-cover-container {
background-size: cover;
width: 100%;
height: 175x;
overflow: hidden;
float: left;
}
.profile-cover-container img {
width: 100%;
height: auto;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
z-index: 0;
}
.cover-overlay {
z-index: 1;
border-top-right-radius: 35%;
border-top-left-radius: 35%;
margin-top: -50px;
width: 100%;
height: 60px;
background: #22313F;
position: relative;
}
.profile-picture {
background-image: url("https://pbs.twimg.com/profile_images/1057449615841214466/KXT83JRQ_400x400.jpg");
background-size: cover;
top: 65px;
width: 150px;
height: 150px;
border-radius: 50%;
margin: auto;
display: block;
z-index: 1;
border: 1px solid #949599;
position: relative;
}
.profile-picture-outer-radius {
width: 158px;
height: 157px;
top: -5px;
left: -5px;
border-radius: 50%;
border: 1px solid #949599;
position: absolute;
}
.infobox {
margin: 80px 25px;
color: #949599;;
}
.infobox p {
margin-top: 10px;
margin-bottom: 0;
}
.infobox-username {
font-size: 1.5em;
text-align: center;
color: white;
}
.align-left {
float: left;
text-align: left;
}
.align-right {
float: right;
text-align: right;
}
.clear-float {
clear: both;
}
.floating-action-button {
height: 50px;
width: 50px;
border-radius: 50%;
background: #35B4E1;
background: -webkit-radial-gradient(#35B4E1, #18B984);
background: -o-radial-gradient(#35B4E1, #18B984);
background: -moz-radial-gradient(#35B4E1, #18B984);
background: radial-gradient(#35B4E1, #18B984);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
cursor: pointer;
font-size: 2.5em;
color: white;
text-align: center;
position: relative;
float: right;
right: 27px;
}
.floating-action-button:hover {
background: #18b984;
background: -webkit-linear-gradient(#18B984, #35B4E1);
background: -o-linear-gradient(#18B984, #35B4E1);
background: -moz-linear-gradient(#18B984, #35B4E1);
background: linear-gradient(#18B984, #35B4E1);
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.25);
}
```
{% endcode %}
Deberías hacer algo así, y tu resultado se deberá ver así:👇
## 😎 Tu Misión 😎
Parece que nuestra aplicación está lista excepto por un pequeño detalle 😵. Debería de poder agregar elementos con información como correo electrónico y profesión.
⭐️ Utiliza lo que ya conoces como: **data** [**binding**](https://alligator.io/angular/data-binding-angular/)**,** las diferentes directivas y variables para adicionar más campos en nuestra tarjeta y ¡Personaliza con tu foto, datos y colores favoritos!
**💪💪**¡¡Felicitaciones!! ¡Llegaste muy lejos! **💪💪**
{% hint style="info" %}
**Nota:**
Si necesitas ayuda con este ejercicio puedes contactar a:
Alejandra Giraldo\
Twitter: @maleja111\
Correo:
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://shecodes.gitbook.io/she-codes-angular/workshop-v.2/basico-2.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.