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

Clase 21 de 57 • Curso de Ionic Avanzado 2017

Contenido del curso

Introducción a Ionic

Estructura de nuestra App con Ionic

Basics de Angular y TypeScript

Agregando estilos con CSS a nuestra aplicación

Acceso a datos remotos

Opciones y Acceso Nativo

Conversación

Amigos

Deploy

Contenido Bonus

Tomar examen

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.

Comentarios

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