Reto: Cambiar ícono según estatus

Clase 26 de 63 • Curso de Angular 6 2018

Dentro de la carpeta de assets que les compartí, se encuentran íconos para representar cada status (online, offline, busy, away).

Usando lo que has aprendido, muestra el ícono correspondiente a un lado del nickname de cada usuario.

Juan Diego Lopez Triana

student•

Así lo solucione yo:

<img class="user-status" src="assets/img/logo_live_{{user.status}}.png" alt="Estatus"/>

moises mannarino

student•

that is good, you solved it in one line of code

Daniel Pereira Perez

student•

Para mi solución primero cree una variable de tipo type para los estados dentro de la interface de user y esta se la aplique como tipo de variable a la propiedad state de la siguiente manera

Esta solución permite a Visual Studio agregar ayudas a la hora de programar y evita que ocurran typos en tu código

Finalmente en el html solo agregue la imagen utilizando el binding de angular con la direccion de las imagenes

<h3> 
          <p>
              <img id="status" src="assets/img/logo_live_{{user.status}}.png" alt="user status">
              Name {{user.nick}} {{i}}
          </p>
        </h3>

Aqui el resultado

Sebastian Valdebenito Guzman Valdebenito Guzman

student•

Me parece una buena solución, lo único que puede mejorarse es pasarle una class status en vez del ID ya que se repite varias veces. Con eso ponemos en la css el tamaño de la imagen

Usuario anónimo

user•

Muy buena propuesta de solución al reto.

Alejandro Castaño Garcés

student•

Agregamos un nuevo campo de status a la inerface

export interface User{
    //"?" indica si es opcional
    nick:       string;
    subnick?:    string;
    age?:        number;
    email: string;
    friend: boolean;
    uid: any;
    status: string;
}

Luego a cada usuario le asignamos su corespondiente status:

  let usuario5: User = {
      nick: 'Marcos',
      age: 30,
      email:'marcos@aoe.aoe',
      friend: false,
      uid: 5,
      status: 'online'
    };

y en el html agregamos una etiqueta de imagen con un string interpolation del campo status en el nombre del icono:

<img src="assets/img/logo_live_{{user.status}}.png" alt="Logo de mezzinger" width="15px">

Ruben Vazquez Almanza

student•

Esta solución me pareció la más práctica y limpia!

Jenniffer Helena Alvarez Puello

student•

me parece una excelente solución

Cristian Gómez

student•

Ruben Garcia

student•

Saludos, para el proyecto que esto elaborando con el curso decidí utilizar materializecss y lo realice de la siguiente forma:

Paso 1. Agregar un nuevo campo status a la infertace User, y agregar a cada objeto en el servicio el nuevo campo.

export interface User {
    nick: string;
    subnick?: string;
    age?: number;
    email: string;
    friend: boolean;
    uid: any;
    status: any;
}

Paso 2. Construir Pipe para convertir el estatus en una ruta de imagen

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'userStatus'
})
export class UserStatusPipe implements PipeTransform {
  public status;
  transform(value: any) {
    switch (value) {
      case 1:
        this.status = 'assets/img/status_live.png';
      break;
      case 2:
        this.status = 'assets/img/status_oc.png';
      break;
      case 3:
        this.status = 'assets/img/status_offline.png';
      break;
    }
    return this.status;
  }

}

Paso 3. Modificar el html para mostrar la imagen.

<ng-container *ngFor="let friend of friends | search: query; let i = index;">
              <li class="collection-item avatar" *ngIf="friend.friend == true">
                <img src="assets/sidenav-demo-avatar.png" alt="" class="circle">
                <span class="title">{{ friend.nick }}</span><br>
                <a routerLink="/conversation/{{ friend.uid }}" >
                  {{ friend.email }}
                </a>
                <a href="#!" class="secondary-content">
                  <img [src]="friend.status | userStatus" class="right" style="width: 10%;height: 10%;">
                </a>
              </li>
            </ng-container>

Resultado: !image1

Felipe Vidal

student•

te quedo buenisimo !

Pedro Roberto Capriles Morales

student•

Se agrega un enum con los posibles estatus

export enum Status{
    Online = 'online',
    Offline = 'offline',
    Busy = 'busy',
    Away = 'away'
}

Se modifica la interface de usuario con un nuevo atributo llamado "Status"

import {Status} from '../enum/statusEnum'
export interface IUser {
    nick:string;
    subnick:string;
    age:number;
    email:string;
    friend:boolean;
    uid:any;
    status?:Status
}

Finalmente se integra a la vista en el home.componen.html

<br />
<input type="text" placeholder="Buscar Amigo" [(ngModel)]="query">
<br />
<b>Amigos</b>
<ng-container *ngFor="let user of friends | search:query; let i = index">
    <div>
        <img class="icon-status" src="../../assets/img/logo_live_{{user.status}}.png" />
        <a  routerLink="/conversation/{{user.uid}}">
            {{i}}.{{user.nick}} - {{user.email}}
        </a>
    </div>

</ng-container>

Resultado

Arturo Mojica Guerrero

student•

La verdad, nunca habia trabajado con enum tengo problemas con el enum en la clase donde se encuentra interface user con el atributo de status, ya que coloco "online", Online y nada me coge. ¿Como lo resuelvo compañero.?

Jeffry Davila

student•

Realice los status con números ,lo mas sencillo posible

<ng-container *ngIf=“user.status==1”>

<a routerLink="/conversation/{{user.uid}}"> <img id=“main-logo” src=“assets/img/logo\_live\_online.png” alt=“Logo de platzinger” width=“20px” height=“20px”> {{i}}. {{user.nick}} - {{user.email}} </a> </ng-container>

<ng-container *ngIf=“user.status==2”>

    <a routerLink="/conversation/{{user.uid}}">
        <img id="main-logo" src="assets/img/logo_live_offline.png" alt="Logo de platzinger" width="20px" height="20px">
        {{i}}. {{user.nick}} - {{user.email}}
    </a>

</ng-container>

<ng-container *ngIf=“user.status==3”>

    <a routerLink="/conversation/{{user.uid}}">
        <img id="main-logo" src="assets/img/logo_live_busy.png" alt="Logo de platzinger" width="20px" height="20px">
        {{i}}. {{user.nick}} - {{user.email}}
    </a>

</ng-container>

<ng-container *ngIf=“user.status==4”>

    <a routerLink="/conversation/{{user.uid}}">
        <img id="main-logo" src="assets/img/logo_live_away.png" alt="Logo de platzinger" width="20px" height="20px">
        {{i}}. {{user.nick}} - {{user.email}}
    </a>

</ng-container>

Expert Intelligence

student•

poner un id en cada usuario para saber su status y dependiendo a cada id, mostrar el icono correspondiente

Usuario ESolutions

student•

Se propone crear un Enum con los estados del usuario, agregar este atributo al usuario, luego en el controlador de la vista crear un map para cada estado con su url y un método para facilitar a la vista la búsqueda del recurso. Model export enum UserState { ONLINE='online', OFFLINE='offline', BUSY='busy', AWAY='away' } export interface User { nick: string; subnick?: string; age?: number; email: string; friend: boolean; uid: any; state:UserState; }

Controller: export class HomeComponent implements OnInit { //otras lineas private mapIconByUserState:Map<UserState,String>;

constructor(private userService:UserService) { //otras lineas this.mapIconByUserState= new Map<UserState,String>(); this.mapIconByUserState.set(UserState.ONLINE,'assets/img/logo_live_online.png'); this.mapIconByUserState.set(UserState.OFFLINE,'assets/img/logo_live_offline.png'); this.mapIconByUserState.set(UserState.BUSY,'assets/img/logo_live_busy.png'); this.mapIconByUserState.set(UserState.AWAY,'assets/img/logo_live_away.png'); } public getUrlOfIconByUserState(userState:UserState ):String{ return this.mapIconByUserState.get(userState); } } Vista: home.component.html

<div *ngFor='let user of friends | search:query; let i=index;'> <a routerLink="/conversation/{{user.uid}}">{{i}}. {{user.nick}} - {{user.email}}</a> <img id="{{'logo-live-'+user.state}}" class= 'logo-live-user-state' src='{{getUrlOfIconByUserState(user.state)}}' /> </div>  Estilo: home.component.css .logo-live-user-state{ width: 24px; }

Diego Ortiz

student•

La idea del enum está muy buena :thumbsup: Y sacar la url con un método también me parece que deja todo más limpio, solo ajustaría el nombre del método de getUrlOfIconByUserState a getIconUrlByUserState El único detalle es que llamarle "controlador" al componente sí suena un poco anticuado :thinking:

Daniel Felipe Contreras López

student•

Bueno aproveche que el nombre de las imágenes solo cambia en el estado y la extensión de las imágenes es la misma para todas y deje que el status modifique el atributo src de mi etiqueta <img> asi: <img class=“statusIcon” src="./assets/img/logo_live_{{usr.status}}.png" alt=""> y tengo este resultado

Anderson Steve Santamaría Ballesteros

student•

Poner un estado al usuario e interpolarlo en la ruta de la imagen <img id=“status” src=“assets/img/logo_live_{{user.state}}.png” alt=“status”>

Erik Ricardo Sánchez Pérez

student•

En mi caso tengo la interface de esta forma

export interface User {
  $key?: string;
  name: string;
  email: string;
  state: States;
  status?: string;
  friend: boolean;
}

export enum States {
  online, offline, busy, away
}

y mi vista de esta otra forma

&lt;p&gt;Amigos&lt;/p&gt;
  &lt;ul *ngFor=&quot;let user of users | search: query&quot;&gt;
    &lt;li *ngIf=&quot;user.friend&quot;&gt;
      &lt;a routerLink=&quot;/conversation/{{user.$key}}&quot; [ngSwitch]=&quot;user.state&quot;&gt;
        &lt;img *ngSwitchCase=&quot;0&quot; src=&quot;assets/img/logo_live_online.png&quot;&gt;
        &lt;img *ngSwitchCase=&quot;1&quot; src=&quot;assets/img/logo_live_offline.png&quot;&gt;
        &lt;img *ngSwitchCase=&quot;2&quot; src=&quot;assets/img/logo_live_busy.png&quot;&gt;
        &lt;img *ngSwitchCase=&quot;3&quot; src=&quot;assets/img/logo_live_away.png&quot;&gt;
        {{user.name}}
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;

ha sido un buen ejercicio :D

Carlos Uriel de Jesus Sánchez González

student•

user.service.ts

import {Injectable} from '@angular/core';
import {User} from '../interfaces/user';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  friends: User[];

  constructor() {
    let usuario1: User = {
      nick: 'Eduardo',
      age: 24,
      email: 'ed@aoe.aoe',
      friend: true,
      uid: 1,
      status: 'online'
    };
    let usuario2: User = {
      nick: 'Freddy',
      age: 28,
      email: 'fred@aoe.aoe',
      friend: true,
      uid: 2,
      status: 'offline'
    };
    let usuario3: User = {
      nick: 'Yuliana',
      age: 18,
      email: 'yuli@aoe.aoe',
      friend: true,
      uid: 3,
      status: 'busy'
    };
    let usuario4: User = {
      nick: 'Ricardo',
      age: 17,
      email: 'rick@aoe.aoe',
      friend: false,
      uid: 4,
      status: 'away'
    };
    let usuario5: User = {
      nick: 'Marcos',
      age: 30,
      email: 'marcos@aoe.aoe',
      friend: false,
      uid: 5,
      status: 'online'
    };
    this.friends = [usuario1, usuario2, usuario3, usuario4, usuario5];
  }

  getFriends() {
    return this.friends;
  }

}

home.component.css

.ico-estatus{
  width: 20px;
  height: 20px;
}

home.component.html

<input type="text" placeholder="Buscar Amigo" [(ngModel)]="query"/>
<br/>
<b>Amigos</b>
<ng-container *ngFor="let user of friends | search: query; let i = index">
  <div>
    <img class="ico-estatus" src="assets/img/logo_live_{{user.status}}.png" alt="Estatus de Contacto"/>
    <a routerLink="/conversation/{{user.uid}}">
      {{i + 1}}. {{user.nick}} - {{user.email}}
    </a>
  </div>
</ng-container>

user.ts

export interface User {
    nick: string;
    subnick?: string;
    age?: number;
    email: string;
    friend: boolean;
    uid: any;
    status: string;
}

Luis Batalla

student•

No pude aplicar el NgIf por estado, agregue al interface una variable online : boolean.
Con ese parámetro intenté obtener los online/offline desde el formulario pero da error:

<ng-container *ngIf="user.online=='true'">

Ahora tengo dudas en que caso utilizar NgIf o un pipe… Me ayudan ?.

Luis Batalla

student•

solucione lo del online/offline usando dos container ngIf user.online y otro negado ngIf !user.online
Ahi obtuve los online y Offline, ahora no se como comparar Strings existe NgIf=“user.status==’'away” o debo recurrir unicamente a un pipe?

Luis Batalla

student•

solucionado!!!

Dany Ladino

student•

Mi solución es algo así.

<input type="text" placeholder="Buscar Amigo" [(ngModel)]="query" />
<br />
<b>Amigos</b>
<ng-container *ngFor="let user of friends | search: query; let i = index"> 
<div>
<a routerLink="/conversation/{{user.uid}}">
  <img id="main-logo" src="assets/img/logo_live_busy.png" alt="busy" *ngIf="i===0">
  <img id="main-logo" src="assets/img/logo_live_away.png" alt="away" *ngIf="i===1">
  <img id="main-logo" src="assets/img/logo_live_offline.png" alt="busy" *ngIf="i===2">
  <img id="main-logo" src="assets/img/logo_live_online.png" alt="busy" *ngIf="i===3">
  <img id="main-logo" src="assets/img/logo_live_online.png" alt="busy" *ngIf="i===4">
    {{i}}. {{user.nick}} - {{user.email}}
</a>
</div>
</ng-container>

Freddy Santacruz

student•

Hola mi solucion fue con un ngSwitch para cada uno de los datos

<<br />
<input type="text" placeholder="Buscar Amigo" [(ngModel)]="query" />
<br />
<b>Amigos</b>
<ng-container *ngFor="let user of friends | search:query; let i=index">
  <div [ngSwitch]="user.estado">
    <p *ngSwitchCase="'C'"><img id="logo-online" src="assets/img/logo_live_online.png" alt="Logo Conectado"> <a routerLink="/conversation/{{user.uid}}">
      {{i}}. {{user.nick}} - {{user.email}}
    </a> </p>
    <p *ngSwitchCase="'N'"><img id="logo-offline" src="assets/img/logo_live_offline.png" alt="Logo No Conectado"> <a routerLink="/conversation/{{user.uid}}">
      {{i}}. {{user.nick}} - {{user.email}}
    </a> </p>
    <p *ngSwitchCase="'O'"><img id="logo-busy" src="assets/img/logo_live_busy.png" alt="Logo Ocupado"> <a routerLink="/conversation/{{user.uid}}">
      {{i}}. {{user.nick}} - {{user.email}}
    </a> </p>
    <p *ngSwitchCase="'I'"><img id="logo-away" src="assets/img/logo_live_away.png" alt="Logo Espera"> <a routerLink="/conversation/{{user.uid}}">
      {{i}}. {{user.nick}} - {{user.email}}
    </a> </p>
  </div>  
</ng-container>>

cada user tiene un estado con valores

C-> conectado
N-> desconectado
O-> Ocupado
I-> en espera (Inactivo)

Ricardo Portillo

student•

El resultado.

luego verifique como lo hicieron lo demás usuario y fue idéntico

Francisco Samuel Hernandez Rodríguez

student•

Así lo resolví, no se si sea lo óptimo, pero funcionó!

<ng-container *ngFor="let user of friends | search: query; let i = index">
	<div>
		<img *ngIf="user.status == 'online'" class="user-status-icon" src="assets/img/logo_live_online.png" alt="">
		<img *ngIf="user.status == 'offline'" class="user-status-icon" src="assets/img/logo_live_offline.png" alt="">
		<img *ngIf="user.status == 'busy'" class="user-status-icon" src="assets/img/logo_live_busy.png" alt="">
		<img *ngIf="user.status == 'away'" class="user-status-icon" src="assets/img/logo_live_away.png" alt="">
		<a routerLink="conversation/user.nick">	
			{{ i+1 }} {{ user.nick }} - {{ user.email }}
		</a>
	</div>
</ng-container>

WALTER RAUL CANCHAN HERMOZA

student•

se creo uncampo el Object User: statusIcono?: string; se agrego en el servicio el nuevo campo y se implemento el html la siguiente linea: <img class='img_icono' src='assets/img/logo_live_{{user.statusIcono}}.png'>

Juan Camilo Zuñiga Sandoval

student•

En User.service.ts agregue un atributo a los usuarios llamado “Status”:

    let usuario1: User = {
      nick: 'Eduardo',
      age: 24,
      email: 'ed@aoe.aoe',
      status:3,     
      friend: true,
      uid: 2
    };

En home.component.html utilice un NgSwitch

<ng-container *ngFor="let user of friends | search: query; let i = index">
    <span [ngSwitch]="user.status">
    <div  *ngSwitchCase = 1>
      <img class="imgStatus" src="../../assets/img/logo_live_online.png" alt="Online">
      <a routerLink = "/conversation/{{user.uid}}">
      {{i+1}}.{{user.nick}}
      </a>
    </div>
      <div *ngSwitchCase = 2>
          <img class="imgStatus" src="../../assets/img/logo_live_offline.png" alt="">
          <a routerLink = "/conversation/{{user.uid}}">
          {{i+1}}.{{user.nick}}
          </a>
      </div>
        <div *ngSwitchCase = 3>
           <img class="imgStatus" src="../../assets/img/logo_live_busy.png" alt="">
            <a routerLink = "/conversation/{{user.uid}}">
            {{i+1}}.{{user.nick}}
            </a>
        </div>
      <div *ngSwitchCase = 4>
          <img class="imgStatus" src="../../assets/img/logo_live_away.png" alt="">
              <a routerLink = "/conversation/{{user.uid}}">
              {{i+1}}.{{user.nick}}
              </a>
      </div>
    </span>
  </ng-container>

export interface User{
    //"?" indica si es opcional
    nick:       string;
    subnick?:    string;
    age?:        number;
    email: string;
    friend: boolean;
    uid: any;
    status: string;
}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'userStatus'
})
export class UserStatusPipe implements PipeTransform {
  public status;
  transform(value: any) {
    switch (value) {
      case 1:
        this.status = 'assets/img/status_live.png';
      break;
      case 2:
        this.status = 'assets/img/status_oc.png';
      break;
      case 3:
        this.status = 'assets/img/status_offline.png';
      break;
    }
    return this.status;
  }

}

<ng-container *ngFor="let friend of friends | search: query; let i = index;">
              <li class="collection-item avatar" *ngIf="friend.friend == true">
                <img src="assets/sidenav-demo-avatar.png" alt="" class="circle">
                <span class="title">{{ friend.nick }}</span><br>
                <a routerLink="/conversation/{{ friend.uid }}" >
                  {{ friend.email }}
                </a>
                <a href="#!" class="secondary-content">
                  <img [src]="friend.status | userStatus" class="right" style="width: 10%;height: 10%;">
                </a>
              </li>
            </ng-container>

<br />
<input type="text" placeholder="Buscar Amigo" [(ngModel)]="query">
<br />
<b>Amigos</b>
<ng-container *ngFor="let user of friends | search:query; let i = index">
    <div>
        <img class="icon-status" src="../../assets/img/logo_live_{{user.status}}.png" />
        <a  routerLink="/conversation/{{user.uid}}">
            {{i}}.{{user.nick}} - {{user.email}}
        </a>
    </div>

</ng-container>

    <a routerLink="/conversation/{{user.uid}}">
        <img id="main-logo" src="assets/img/logo_live_offline.png" alt="Logo de platzinger" width="20px" height="20px">
        {{i}}. {{user.nick}} - {{user.email}}
    </a>

    <a routerLink="/conversation/{{user.uid}}">
        <img id="main-logo" src="assets/img/logo_live_busy.png" alt="Logo de platzinger" width="20px" height="20px">
        {{i}}. {{user.nick}} - {{user.email}}
    </a>

    <a routerLink="/conversation/{{user.uid}}">
        <img id="main-logo" src="assets/img/logo_live_away.png" alt="Logo de platzinger" width="20px" height="20px">
        {{i}}. {{user.nick}} - {{user.email}}
    </a>

&lt;p&gt;Amigos&lt;/p&gt;
  &lt;ul *ngFor=&quot;let user of users | search: query&quot;&gt;
    &lt;li *ngIf=&quot;user.friend&quot;&gt;
      &lt;a routerLink=&quot;/conversation/{{user.$key}}&quot; [ngSwitch]=&quot;user.state&quot;&gt;
        &lt;img *ngSwitchCase=&quot;0&quot; src=&quot;assets/img/logo_live_online.png&quot;&gt;
        &lt;img *ngSwitchCase=&quot;1&quot; src=&quot;assets/img/logo_live_offline.png&quot;&gt;
        &lt;img *ngSwitchCase=&quot;2&quot; src=&quot;assets/img/logo_live_busy.png&quot;&gt;
        &lt;img *ngSwitchCase=&quot;3&quot; src=&quot;assets/img/logo_live_away.png&quot;&gt;
        {{user.name}}
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;

import {Injectable} from '@angular/core';
import {User} from '../interfaces/user';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  friends: User[];

  constructor() {
    let usuario1: User = {
      nick: 'Eduardo',
      age: 24,
      email: 'ed@aoe.aoe',
      friend: true,
      uid: 1,
      status: 'online'
    };
    let usuario2: User = {
      nick: 'Freddy',
      age: 28,
      email: 'fred@aoe.aoe',
      friend: true,
      uid: 2,
      status: 'offline'
    };
    let usuario3: User = {
      nick: 'Yuliana',
      age: 18,
      email: 'yuli@aoe.aoe',
      friend: true,
      uid: 3,
      status: 'busy'
    };
    let usuario4: User = {
      nick: 'Ricardo',
      age: 17,
      email: 'rick@aoe.aoe',
      friend: false,
      uid: 4,
      status: 'away'
    };
    let usuario5: User = {
      nick: 'Marcos',
      age: 30,
      email: 'marcos@aoe.aoe',
      friend: false,
      uid: 5,
      status: 'online'
    };
    this.friends = [usuario1, usuario2, usuario3, usuario4, usuario5];
  }

  getFriends() {
    return this.friends;
  }

}

<input type="text" placeholder="Buscar Amigo" [(ngModel)]="query"/>
<br/>
<b>Amigos</b>
<ng-container *ngFor="let user of friends | search: query; let i = index">
  <div>
    <img class="ico-estatus" src="assets/img/logo_live_{{user.status}}.png" alt="Estatus de Contacto"/>
    <a routerLink="/conversation/{{user.uid}}">
      {{i + 1}}. {{user.nick}} - {{user.email}}
    </a>
  </div>
</ng-container>

<input type="text" placeholder="Buscar Amigo" [(ngModel)]="query" />
<br />
<b>Amigos</b>
<ng-container *ngFor="let user of friends | search: query; let i = index"> 
<div>
<a routerLink="/conversation/{{user.uid}}">
  <img id="main-logo" src="assets/img/logo_live_busy.png" alt="busy" *ngIf="i===0">
  <img id="main-logo" src="assets/img/logo_live_away.png" alt="away" *ngIf="i===1">
  <img id="main-logo" src="assets/img/logo_live_offline.png" alt="busy" *ngIf="i===2">
  <img id="main-logo" src="assets/img/logo_live_online.png" alt="busy" *ngIf="i===3">
  <img id="main-logo" src="assets/img/logo_live_online.png" alt="busy" *ngIf="i===4">
    {{i}}. {{user.nick}} - {{user.email}}
</a>
</div>
</ng-container>

<<br />
<input type="text" placeholder="Buscar Amigo" [(ngModel)]="query" />
<br />
<b>Amigos</b>
<ng-container *ngFor="let user of friends | search:query; let i=index">
  <div [ngSwitch]="user.estado">
    <p *ngSwitchCase="'C'"><img id="logo-online" src="assets/img/logo_live_online.png" alt="Logo Conectado"> <a routerLink="/conversation/{{user.uid}}">
      {{i}}. {{user.nick}} - {{user.email}}
    </a> </p>
    <p *ngSwitchCase="'N'"><img id="logo-offline" src="assets/img/logo_live_offline.png" alt="Logo No Conectado"> <a routerLink="/conversation/{{user.uid}}">
      {{i}}. {{user.nick}} - {{user.email}}
    </a> </p>
    <p *ngSwitchCase="'O'"><img id="logo-busy" src="assets/img/logo_live_busy.png" alt="Logo Ocupado"> <a routerLink="/conversation/{{user.uid}}">
      {{i}}. {{user.nick}} - {{user.email}}
    </a> </p>
    <p *ngSwitchCase="'I'"><img id="logo-away" src="assets/img/logo_live_away.png" alt="Logo Espera"> <a routerLink="/conversation/{{user.uid}}">
      {{i}}. {{user.nick}} - {{user.email}}
    </a> </p>
  </div>  
</ng-container>>

<ng-container *ngFor="let user of friends | search: query; let i = index">
	<div>
		<img *ngIf="user.status == 'online'" class="user-status-icon" src="assets/img/logo_live_online.png" alt="">
		<img *ngIf="user.status == 'offline'" class="user-status-icon" src="assets/img/logo_live_offline.png" alt="">
		<img *ngIf="user.status == 'busy'" class="user-status-icon" src="assets/img/logo_live_busy.png" alt="">
		<img *ngIf="user.status == 'away'" class="user-status-icon" src="assets/img/logo_live_away.png" alt="">
		<a routerLink="conversation/user.nick">	
			{{ i+1 }} {{ user.nick }} - {{ user.email }}
		</a>
	</div>
</ng-container>

<ng-container *ngFor="let user of friends | search: query; let i = index">
    <span [ngSwitch]="user.status">
    <div  *ngSwitchCase = 1>
      <img class="imgStatus" src="../../assets/img/logo_live_online.png" alt="Online">
      <a routerLink = "/conversation/{{user.uid}}">
      {{i+1}}.{{user.nick}}
      </a>
    </div>
      <div *ngSwitchCase = 2>
          <img class="imgStatus" src="../../assets/img/logo_live_offline.png" alt="">
          <a routerLink = "/conversation/{{user.uid}}">
          {{i+1}}.{{user.nick}}
          </a>
      </div>
        <div *ngSwitchCase = 3>
           <img class="imgStatus" src="../../assets/img/logo_live_busy.png" alt="">
            <a routerLink = "/conversation/{{user.uid}}">
            {{i+1}}.{{user.nick}}
            </a>
        </div>
      <div *ngSwitchCase = 4>
          <img class="imgStatus" src="../../assets/img/logo_live_away.png" alt="">
              <a routerLink = "/conversation/{{user.uid}}">
              {{i+1}}.{{user.nick}}
              </a>
      </div>
    </span>
  </ng-container>

Reto: Cambiar ícono según estatus

Introducción

Qué aprenderás sobre Angular 6

Introducción a Angular

Configurando nuestro proyecto en Git y Github

Introducción a Angular CLI y al proyecto de Platzinger

Instalación del entorno de desarrollo en Mac OS

Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas

Corriendo nuestra app en el navegador

Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)

Definición de la estructura del App

¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?

Explorando el sistema de archivos

¿Qué son y cómo generar los primeros componentes de nuestra app?

Navegación básica entre componentes

Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú

Reto: Varias conversaciones a la vez

Basics de Angular y TypeScript

¿Cómo usar tipos de datos con TypeScript?

Qué son las interfaces de TypeScript y su implementación

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios desde Conversation.ts

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Pipes en Angular (date, number, json)

Creando nuestro propio pipe para buscar entre nuestros contactos

Estilos

¿Cómo usar estilos CSS y referenciar recursos?

Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json

Reto: Cambiar ícono según estatus

Implementando estilos en la pantalla de login

Terminando de implementar los estilos de nuestra pantalla de login

Implementando estilos en el navbar

Implementando estilos en la pantalla de home

Implementando estilos en home, lista de contactos

Implementando estilos en profile

Reto: Estilos en la pantalla de conversación

Usando ngClass para añadir estilos dinámicos

Reto: Mejorar estilos en la pantalla de conversación

Acceso a datos remotos y login

¿Qué es Firebase? Creando nuestro proyecto

Diferencia entre conexión por sockets y HTTP

Instalación y setup de la librería AngularFire a través de npm

Login/Registro de usuarios con email y password

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Guards para verificar Firebase auth

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Reto: Implementar API HTTP

Opciones y subida de imágenes

Perfil de usuario

Seleccionar fotos usando una librería para image cropping

Guardando las imágenes de perfil en nuestra base de datos de firebase

Conversación

¿Cómo resolver el problema de comunicación en tiempo real?

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Reto: Envía una foto

Amigos

Planeación previa para la característica, ¿cómo generaremos las solicitudes?

Enviando una solicitud de amistad

Generando el modal de solicitud de amistad

Aceptando solicitudes de amistad

Mostrando sólo contactos que son amigos

Componentes anidados (con paso de parámetros)

Reto: Mensaje personal en Solicitud de Amistad

Deploy

Creando un wrapper para desktop, usando Electron

Reto: Dándole Características PWA a nuestra App

Exportando app para web, complementando con Firebase Hosting

Conclusión

Conclusión

Cuéntanos