Básico 2: Creando mi perfil 👤
En este reto aprendamos sobre directivas. Una directiva se representa como un atributo en una etiqueta HTML; *ngIf, *ngFor o *ngSwitch son algunas y le adiciona un comportamiento definido.
💡 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!
Paso 1: Creemos nuestra App de Angular ⭐️
Entra a 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:
<div class="card">
<div class="profile-picture">
<div class="profile-picture-outer-radius"></div>
</div>
<div class="infobox">
<p class="infobox-username" *ngIf="name">{{name}}</p>
</div>
<div class="floating-action-button"> + </div>
</div>Deberías hacer algo así, y tu resultado se deberá ver así:👇
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
<div class="">
<p class="align-left" *ngIf="following > 100">Following:</p><p class="align-right">{{following}}</p>
</div>
<div class="clear-float" *ngIf="following > 700">
<p class="align-left">Followers:</p><p class="align-right">{{followers}}</p>
</div>Deberías hacer algo así, y tu resultado se deberá ver así:👇
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
<div class="clear-float" *ngFor="let strength of strengths">
<p class="align-left">{{strength.text}}</p><p class="align-right">{{strength.level}}</p>
</div>Deberías hacer algo así, y tu resultado se deberá ver así:👇
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
<div class="clear-float" *ngFor="let person of people" [ngSwitch]="person.color">
<div *ngSwitchCase="'pink'" [style.color]="person.color">
<p class="align-left">{{person.name}}</p><p class="align-right">{{person.color}}</p>
</div>
</div>Deberías hacer algo así, y tu resultado se deberá ver así:👇
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:
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'
}
];
}
Deberías hacer algo así, y tu resultado se deberá ver así:👇
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:
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);
}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, 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! 💪💪
Last updated
Was this helpful?