Reto: Mostrar un icono diferente según el status del usuario

Clase 21 de 57 • Curso de Ionic Avanzado 2017

Usando alguna directiva de Angular, como *ngIf, en la lista de amigos del app, muestra un icono distinto según el status de cada usuario. (Puedes encontrar los iconos en la carpeta de assets)

Si necesitas ayuda o para mostrar los resultados, no olvides usar el sistema de discusiones y ayudar también a los demás en este reto.

Gabriel Pérez Moreno

student•

Mi diseño alcanzado =>

Juan C Felizzola

student•

Así quedó mi Home:

Así hice el listado:

<ion-list>

    <ion-list-header>
      Listado
    </ion-list-header>

    <ion-item *ngFor="let user of friends | search: query; let i = index">
      <ion-icon name="contact" color="secondary" *ngIf="user.friend"></ion-icon>
      <ion-icon name="person-add" color="danger" *ngIf="!user.friend"></ion-icon>
        {{ i + 1 }}. {{ user.nick }}

      <p item-end>{{ user.email }}</p>
    </ion-item>
    
  </ion-list>```

Luis Morrison

student•

Hasta ahora usando componentes de Ionic:

Wilson Fabian Pérez Sucuzhañay

student•

Círculos Friends
Con el signo + es el add

Ya que en la carpeta assest no esta mas que el logo de ionic

Leandro Peralta

student•

Winston Chavez

student•

David López Guahuña

student•

Hola, aquí mi solucion del reto.

Carlos Enrique Ramírez Flores

student•

Carlos Uriel de Jesus Sánchez González

student•

buen reto

yhoiner Morales Rios

student•

Realizado con los cilos ngFor, ngIF y template.
Muestra los estados del usuario: “activo”, “inactivo”, “ocupado”.
![](

![](

Es necesario agregar el estado en el servicce user
status: Status.Online por cada usuario para que sea dinámico

con comprendo porqué se desajustan las cajas

Pedro Roberto Capriles Morales

student•

Código con el resultado del reto, asi quedo el HTML

  <ion-list>
      <ion-list-header class="hydrated">
          Amigos
      </ion-list-header>

      <ng-container *ngFor="let user of friends | search:query; let i = index">
           <ion-item  (click)="goToConversation(user)" >

              <ion-label>
                <h2 class="platzinger-ion-item">
                    <ng-container *ngFor="let userStatus of status">
                        <ion-icon *ngIf = "user.statusId == userStatus.id" name="{{userStatus.icon}}" [ngStyle]="{'color':userStatus.color}"></ion-icon>
                    </ng-container>
                  {{user.nick}}
                </h2>
                <h3> {{user.email}}</h3>
              </ion-label>
            </ion-item>
            
      </ng-container>
     
    </ion-list>

Michael Stiduar Quiñones Jaimes

student•

![](

Martin Mendez

student•

Ahi va el mio,

  <ion-searchbar (ionInput)="text" placeholder="Buscar amigo" [(ngModel)]="query"></ion-searchbar>
  <input type="text" placeholder="Buscando" [(ngModel)]="query" />

  <h4>Amigos</h4>
  <ion-list>
    <div *ngFor="let user of friends | search: query; let i = index">
      <button ion-item (click)="goToConversation(user.uid)">
        <ion-icon name="heart" *ngIf="user.friend == true" ></ion-icon>
        <ion-icon name="person-add" *ngIf="user.friend == false" ></ion-icon>
        -- {{i}}.. {{user.nick}} -- {{user.email}}
      </button>
    </div>
  </ion-list>

<ion-list>

    <ion-list-header>
      Listado
    </ion-list-header>

    <ion-item *ngFor="let user of friends | search: query; let i = index">
      <ion-icon name="contact" color="secondary" *ngIf="user.friend"></ion-icon>
      <ion-icon name="person-add" color="danger" *ngIf="!user.friend"></ion-icon>
        {{ i + 1 }}. {{ user.nick }}

      <p item-end>{{ user.email }}</p>
    </ion-item>
    
  </ion-list>```

  <ion-list>
      <ion-list-header class="hydrated">
          Amigos
      </ion-list-header>

      <ng-container *ngFor="let user of friends | search:query; let i = index">
           <ion-item  (click)="goToConversation(user)" >

              <ion-label>
                <h2 class="platzinger-ion-item">
                    <ng-container *ngFor="let userStatus of status">
                        <ion-icon *ngIf = "user.statusId == userStatus.id" name="{{userStatus.icon}}" [ngStyle]="{'color':userStatus.color}"></ion-icon>
                    </ng-container>
                  {{user.nick}}
                </h2>
                <h3> {{user.email}}</h3>
              </ion-label>
            </ion-item>
            
      </ng-container>
     
    </ion-list>

  <ion-searchbar (ionInput)="text" placeholder="Buscar amigo" [(ngModel)]="query"></ion-searchbar>
  <input type="text" placeholder="Buscando" [(ngModel)]="query" />

  <h4>Amigos</h4>
  <ion-list>
    <div *ngFor="let user of friends | search: query; let i = index">
      <button ion-item (click)="goToConversation(user.uid)">
        <ion-icon name="heart" *ngIf="user.friend == true" ></ion-icon>
        <ion-icon name="person-add" *ngIf="user.friend == false" ></ion-icon>
        -- {{i}}.. {{user.nick}} -- {{user.email}}
      </button>
    </div>
  </ion-list>

Reto: Mostrar un icono diferente según el status del usuario

Introducción a Ionic

Intro a Ionic Framework, Angular, Platzinger, y Ionic CLI

Instalación de Ionic y más herramientas en Mac OS

Instalación de Ionic y más herramientas de desarrollo en Windows

Estructura de nuestra App con Ionic

Arquitectura de una app en Ionic

Proyecto: Platzinger App

Repositorio del curso

Qué son pages y cómo generar las primeras de nuestra app

Navegación básica entre pages

Reto: Página “Acerca de” accesible desde el menú lateral

Tomando los conceptos compartidos de Angular y Ionic

Basics de Angular y TypeScript

Aclaraciones Ionic vs Angular

Cómo usar tipos de datos con typescript

Qué son e implementando interfaces de TypeScript

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios con conversation.ts

Creando un servicio de usuarios e inyectando el servicio en nuestros pages

Pipes en TypeScript (Date, Number, Json)

Creando nuestro propio 'Pipe' para buscar entre nuestros contactos

Reto: Mostrar un icono diferente según el status del usuario

Agregando estilos con CSS a nuestra aplicación

Cómo usar estilos CSS y referenciar recursos

Implementando estilos en la pantalla de login

Implementando estilos en la pantalla de home

Implementando estilos en la pantalla de conversación

Usando ngStyle y ngClass para añadir estilos dinámicos

Cambiar icono según status

Acceso a datos remotos

Información importante antes de continuar

¿Qué es Firebase?

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

Login/Registro de usuarios con email y password

Login/Registro de usuarios con Facebook

Implementando Log Out

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

Opciones y Acceso Nativo

Crear page de Perfil

Editar datos básicos del perfil de usuario

Configurando Android Studio

Capturar fotos de cámara y álbum

Preparando aplicación para recibir fotos desde la cámara y galería del Android

Guardando y asignando una foto de perfil al usuario desde la cámara

Preparando aplicación para utilizar geolocalización

Conectándonos al API de Google

Conversación

Más estilos

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

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

Amigos

Planeación previa para la característica / Cómo generaremos las solicitudes

Enviando una solicitud de amistad

Revisando solicitudes de amistad

Aceptando solicitudes de amistad

Mostrando sólo amigos

Componentes anidados (con paso de parámetros)

Deploy

Exportando app para iOS y complementando con Xcode

Exportando app para web, complementando con Firebase Hosting

Conclusiones del curso

Contenido Bonus

Publicando nuestra aplicación en Android y iOS stores

Cuéntanos