NgIf aplicado en la lista de usuarios

Clase 18 de 63 • Curso de Angular 6 2018

Resumen

NgIF es una directiva estructural de Angular que evalúa un valor o una expresión buleana, en función de la cual se mostrará o no, un elemento HTML. El elemento se mostrará sólo cuando la condición sea verdadera (true).

Carlos Enrique Ramírez Flores

student•

ng-container es una etiqueta auxiliar que se usa para correr un **ngFor **con **ngIf **anidados.

<ol>
<ng-container *ngFor="let user of usuarios">
<li *ngIf="true">
	{{user.nick}} {{user.email}}
</li>
</ng-container>
</ol>```

Jecsham Castillo

student•

Una manera óptima sería correr el array de friends en el mismo module.ts y asignar a los trues y falses en arrays distintas

Alex Eugenio Gavidia Donayre

student•

El ejemplo hubiese quedado mejor si mostrabas la. Lista de conectados y no conectados. Saludos desde Perú 🤣

ulises campos

student•

Tambien vi que se puede utilizar ng-if-else y ng-if-then-else el primero tengo idea de como utilizarlo me gustaria saber para que es el otro y como implementarlo.
Saludos 😄

Anthony Gonzalez

student•

No es posible utilizar dos directivas estructurales en un solo elemento, para estos casos Angular nos ofrece la etiqueta html ng-container

carlos Alberto Bedoya Ramirez

student•

No entiendo por que los archivos adjuntos al curso son distintos al que muestran en el video :S

Jesús Auriol Villamarín Ortiz

student•

Mi lista de amigos conectados y no conectados

**home.component.html **

<ng-container *ngFor="let user of users; let i = index">
  <li>
    <p>
      <strong>{{ i + 1 }}</strong> . {{ user.nick }} - {{ user.age }} -
      <strong>{{ user.email }}</strong>
    </p>
    <div class="status" [ngStyle]="{'background-color': user.status ? '#25ef4e' : '#ef2630'}"></div>
  </li>
</ng-container>

home.component.css

li{
  list-style: none;
  margin: 0;
  height: 6px;;
}

.status{
  margin: 0;
  padding: 0;
  position: relative;
  bottom: 30px;
  left: 320px;
  height: 10px;
  width: 10px;
  border-radius: 100%;

}

home.component.ts

import { User } from './../models/user';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  users: User[];

  constructor() {
    let user1: User = {
      nick: 'Jesús',
      subnick: 'Ragnar',
      age: 21,
      email: 'jvillamarin@outlook.com',
      status: true,
      uid: 1
    };
    let user2: User = {
      nick: 'Lali',
      subnick: 'Rapis',
      age: 16,
      email: 'Lali@outlook.com',
      status: false,
      uid: 1
    };
    let user3: User = {
      nick: 'Sara',
      subnick: 'Sara',
      age: 57,
      email: 'Sara@outlook.com',
      status: true,
      uid: 3
    };
    let user4: User = {
      nick: 'Humberto',
      subnick: 'Mechas',
      age: 32,
      email: 'humberto@outlook.com',
      status: true,
      uid: 2
    };

    this.users = [user1, user2, user3, user4];
  }

  ngOnInit() {

  }

}

Jesús Auriol Villamarín Ortiz

student•

Alguien tiene otro método o alguien que lo pueda simplificar?

Cristian Andres Cañon Recalde

student•

No me aparece nada, tengo un problema desde la seccion anterior

Daniel Stiven Amador Arias

student•

Quita el primer *ngFor

Leo Amato

student•

pudiste solucionarlo?, me toma todo parte desde *ngFor como un string y no se como cambiar eso.

Juan Camilo Zuñiga Sandoval

student•

<ng-container *ngFor="let user of friends; let i = index">
      <p *ngIf="user.friend==true">
        {{i+1}} Mi nombre es {{user.nick}} y tengo {{user.age}} años
      </p>
  </ng-container>

Usuario anónimo

user•

<br/>
<b>Amigos</b>  
<ng-container *ngFor="let user of friends; let i = index">
  <p  *ngIf="user.friend">
        {{i}}. {{user.nick}} - {{user.email}}
  </p>
</ng-container>

<b>No agregados</b> 
<ng-container *ngFor="let user of friends; let i = index"> 
    <p  *ngIf="!user.friend">
    {{i}}. {{user.nick}} - {{user.email}}
    </p>
</ng-container>

Marco Flores

student•

Una pregunta, tengo entendido que con el ngIf ademas de eliminar unelemento del DOM este en caso de tener un tag de angular lo destruiria y volveria a construir. Mi pregunta seria como actuaria en el caso del ngSwitch este tendria el mismo comportamiento?

Gaspar Santillan

student•

Hola gente tengo una duda, que extension deberia instalar para que al escribir user. me salte el friends?

Alan Fermin

student•

Saludos,

Una consulta. Porqué usa la etiqueta <b> en vez de <p> para "amigos" y "No agregados"

Bryan Alejandro Sánchez Ramírez

student•

Es una etiqueta para poner en negrita el texto. La <b> es por bold.

Enrique Díaz Barrantes

student•

Les comparto mi ejemplo:

<h1>Welcome Home {{myUser.nick}}</h1>
<h3>Here are some of your friends</h3>
<ng-container *ngFor="let friend of friends; let i = index">
  <li *ngIf="friend.friend === true">{{i}} - {{friend.nick}}, {{friend.subNick}}</li>
</ng-container>
<h3>These are not your friends</h3>
<ng-container *ngFor="let friend of friends; let i = index">
  <li *ngIf="friend.friend === false">{{i}} - {{friend.nick}}, {{friend.subNick}}</li>
</ng-container>

Carlos Uriel de Jesus Sánchez González

student•

<br/>
<b>Amigos</b>
<ng-container *ngFor="let user of friends; let i = index">
  <p *ngIf="user.friend">
    {{i + 1}}. {{user.nick}} - {{user.email}}
  </p>
</ng-container>

No agregados
<ng-container *ngFor="let user of friends; let i = index">
  <p *ngIf="!user.friend">
    {{i + 1}}. {{user.nick}} - {{user.email}}
  </p>
</ng-container>

Jeison Sneider Ruiz Zemanate

student•

home.component.html ----->

<br/>
<br/>
<b>Amigos</b>
<ng-container *ngFor="let user of friends; let i = index">

  <p *ngIf="user.friend" >
    {{i}}. {{user.nick}} - {{user.email}}
  </p>

</ng-container>

<b>No Agregadoss</b>
<ng-container *ngFor="let user of friends; let i = index">

  <p *ngIf="!user.friend" >
    {{i}}. {{user.nick}} - {{user.email}}
  </p>


</ng-container>

home.component.ts ---->

import { Component, OnInit } from '@angular/core';
import {User} from '../interfaces/user';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

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

  ngOnInit() {
  }

}

Luis Angel Frias Herrera

student•

ng-container Esta directiva de angular no es visible para el usuario en el front-end y nos permite declarar más de una directiva anidadas dentro de dicho elemento. Permitiendo así combinar funcionalidades de directivas.

Mario Alejandro Macias Ortiz

student•

sino utilizares ng-container podrias utilizar <p> anidados?

Eric Alejandro Hernández Moreno

student•

No seria correcto ya que al compilar el html te arrojaría error

<ng-container *ngFor="let user of users; let i = index">
  <li>
    <p>
      <strong>{{ i + 1 }}</strong> . {{ user.nick }} - {{ user.age }} -
      <strong>{{ user.email }}</strong>
    </p>
    <div class="status" [ngStyle]="{'background-color': user.status ? '#25ef4e' : '#ef2630'}"></div>
  </li>
</ng-container>

li{
  list-style: none;
  margin: 0;
  height: 6px;;
}

.status{
  margin: 0;
  padding: 0;
  position: relative;
  bottom: 30px;
  left: 320px;
  height: 10px;
  width: 10px;
  border-radius: 100%;

}

import { User } from './../models/user';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  users: User[];

  constructor() {
    let user1: User = {
      nick: 'Jesús',
      subnick: 'Ragnar',
      age: 21,
      email: 'jvillamarin@outlook.com',
      status: true,
      uid: 1
    };
    let user2: User = {
      nick: 'Lali',
      subnick: 'Rapis',
      age: 16,
      email: 'Lali@outlook.com',
      status: false,
      uid: 1
    };
    let user3: User = {
      nick: 'Sara',
      subnick: 'Sara',
      age: 57,
      email: 'Sara@outlook.com',
      status: true,
      uid: 3
    };
    let user4: User = {
      nick: 'Humberto',
      subnick: 'Mechas',
      age: 32,
      email: 'humberto@outlook.com',
      status: true,
      uid: 2
    };

    this.users = [user1, user2, user3, user4];
  }

  ngOnInit() {

  }

}

<br/>
<b>Amigos</b>  
<ng-container *ngFor="let user of friends; let i = index">
  <p  *ngIf="user.friend">
        {{i}}. {{user.nick}} - {{user.email}}
  </p>
</ng-container>

<b>No agregados</b> 
<ng-container *ngFor="let user of friends; let i = index"> 
    <p  *ngIf="!user.friend">
    {{i}}. {{user.nick}} - {{user.email}}
    </p>
</ng-container>

<h1>Welcome Home {{myUser.nick}}</h1>
<h3>Here are some of your friends</h3>
<ng-container *ngFor="let friend of friends; let i = index">
  <li *ngIf="friend.friend === true">{{i}} - {{friend.nick}}, {{friend.subNick}}</li>
</ng-container>
<h3>These are not your friends</h3>
<ng-container *ngFor="let friend of friends; let i = index">
  <li *ngIf="friend.friend === false">{{i}} - {{friend.nick}}, {{friend.subNick}}</li>
</ng-container>

<br/>
<b>Amigos</b>
<ng-container *ngFor="let user of friends; let i = index">
  <p *ngIf="user.friend">
    {{i + 1}}. {{user.nick}} - {{user.email}}
  </p>
</ng-container>

No agregados
<ng-container *ngFor="let user of friends; let i = index">
  <p *ngIf="!user.friend">
    {{i + 1}}. {{user.nick}} - {{user.email}}
  </p>
</ng-container>

<br/>
<br/>
<b>Amigos</b>
<ng-container *ngFor="let user of friends; let i = index">

  <p *ngIf="user.friend" >
    {{i}}. {{user.nick}} - {{user.email}}
  </p>

</ng-container>

<b>No Agregadoss</b>
<ng-container *ngFor="let user of friends; let i = index">

  <p *ngIf="!user.friend" >
    {{i}}. {{user.nick}} - {{user.email}}
  </p>


</ng-container>

import { Component, OnInit } from '@angular/core';
import {User} from '../interfaces/user';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

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

  ngOnInit() {
  }

}

NgIf aplicado en la lista de usuarios

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