Directiva ngIf

Resumen

Directiva ngIf es una directiva estructural, ésta directiva nos permite mostrar elementos de HTML de acuerdo a una condición que definamos.

Juan C Felizzola

student•

En la component.ts:
personas: any = [
    {edad: 10, nombre: 'Suri'},
    {edad: 28, nombre: 'Mónica'},
    {edad: 18, nombre: 'Jennifer'},
    {edad: 20, nombre: 'Shirley'},
    {edad: 1, nombre: 'Bebé'},
    {edad: 18, nombre: 'Juan'}
  ];

Y en el component.html:
<ul>
    <ng-container *ngFor="let persona of personas">
        <li *ngIf="persona.edad >= 18">{{persona.nombre}}</li>
    </ng-container>
</ul>

Eduardo de la Cruz Ibarra

teacher•

Perfecto!

Gilberth Arias Araya

student•

Que editor de Texto estas utilizando?

Danny Velásquez

student•

Que diferencia hay entre un contenedor normal como un div o span y ng-container, digo esto porque el funcionamiento con cualquiera de los 3 no parece cambiar en la parte visual

 <ul >
  <span *ngFor="let lugar of lugares">
    <li *ngIf="lugar.active" >{{lugar.nombre}}</li>
  </span>
  </ul>```

<ul > <ng-container \*ngFor=“let lugar of lugares”> <li \*ngIf=“lugar.active” >{{lugar.nombre}}</li> </ng-container> </ul>```

Eduardo de la Cruz Ibarra

teacher•

ng-container no te agrega más jerarquía en el DOM, a diferencia de los otros dos que mencionas.

Edgar Moises Valdez Faria

student•

ng-container no se pinta en la vista al renderearse,
a lo que voy es que esto:

<ng-container *ngFor=“let lugar of lugares”>
<li *ngIf=“lugar.active” >{{lugar.nombre}}</li>
</ng-container>

se traduce en esto:

<li >Lugar 1</li>
<li >Lugar 2</li>
.....

En cambio con el div esto:

<div *ngFor=“let lugar of lugares”>
<li *ngIf=“lugar.active” >{{lugar.nombre}}</li>
</div>

se traduce a:

<div>
<li >Lugar 1</li>
</div>
<div>
<li >Lugar 2</li>
</div>
.....

O sea que usando un div agregamos elementos al DOM, en cambio con ng-container no recargamos el DOM

Teofilo Rosales Gama

student•

Usen visual studio code e instalen un plugin llamado
Auto Import para el atocompletado de componentes php storm es el que utilizan pero es de pago visual studio code es gratis

Wilson Alejandro Gonzalez Gaitan

student•

lo descargue y me parece interesante el plugin

Patricio Jacho

student•

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  persons: any = [
    { age: 18, name: 'pepe' },
    { age: 17, name: 'pablo' },
    { age: 13, name: 'hugo' },
    { age: 44, name: 'paco' },
    { age: 15, name: 'luis' }
  ];

}

app.component.html

<ul>
  <ng-container *ngFor="let person of persons">
    <li *ngIf="person.age >= 18">{{person.name}}</li>
  </ng-container>
</ul>

Gerardo Gutiérrez

student•

hice esto con bandas de metal lml :

  bandas:anny =[
  	{ nombre: 'Cannibal Corspe', genero:'Brutal_Death_Metal'}
  	{ nombre: 'Vader', genero:'Brutal_Death_Metal'}
  	{ nombre: 'Abobinable putrefaction', genero:'Brutal_Death_Metal'}
  	{ nombre: 'Cannabis Corspe', genero:'Brutal_Death_Metal'}
  	{ nombre: 'Six feet under', genero:'Death_Metal'}
  ];

y en html

<ng-container *ngFor="let banda of bandas">
    <li *ngIf="banda.genero=='Brutal_Death_Metal'" >{{banda.nombre}}</li>
 </ng-container>

Roberto Adnier Nuñez Farfán

student•

ng-container también es útil para la manipulación de los elementos option de la etiqueta select. Por ejemplo:

<select [(ngModel)]="hero">
  <ng-container *ngFor="let h of heroes">
    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </ng-container>
  </ng-container>
</select>

Jessie Buckland Pérez

student•

En el caso de querer separar varias directivas, ¿se anidan los ng-container? o ¿existe alguna práctica mas eficiente si tengo que comparar por ejemplo 6 propiedades de un objeto?.

Juan Esteban Deossa Pertuz

student•

*ngIf=”booleanValue” : El *ngIf nos permite desplegar la información si su valor es verdadero o si se cumple la condición que esta tiene como valor. Ejemplo:

<ul> <ng-container *ngFor=”let persona of personas”> <li *ngIf=”persona.viva” >{{persona.nombre}}</li> </ng-container> </ul>

Milciades Vargas Liz

student•

lugares:any = [
    {active:true, nombre:'Pagina 1'},
    {active:true, nombre:'Pagina 2'},
    {active:false, nombre:'Pagina 3'},
    {active:true, nombre:'Pagina 4'},
    {active:true, nombre:'Pagina 5'},
    {active:true, nombre:'Pagina 6'}
  ];

  <ul>
    <ng-container *ngFor="let lugar of lugares">
      <li *ngIf="lugar.active">{{lugar.nombre}}</li>
    </ng-container>
  </ul>

Anthony Grimaldo Juarez Solis

student•

<div style="text-align: center;">
  <ul>
    <ng-container *ngFor="let lugar of lugares">
      <li *ngIf="lugar.active">{{ lugar.nombre }}</li>
    </ng-container>
  </ul>
</div>

  lugares: any = [
    {
      nombre: "item 1",
      active: true
    },
    {
      nombre: "item 2",
      active: false
    },
    {
      nombre: "item 3",
      active: true
    }
  ];

Cristian Palta

student•

BUena classes

Carlos Uriel de Jesus Sánchez González

student•

Muy buena directiva

Juan José Negris

student•

Hola. Espero alguien me pueda atudar con esta duda. Quisiera entender porqué el *ngIf indica lugar.active y no lugares.active, siendo que lugares es el nombre del Array. Es esto porque hemos ejecutado ya el ngFor y guardado las valores del array en variables? En el caso de que no hubiesemos hecho el ngFor como sabría angular que lugar.active esta refiriendo a los objetos contenidos en el array lugares? Muchas gracias. Saludos

Diego Forero

Team Platzi•

Como lo mencionas es porque se usa el ngFor, si no iteras no hay forma de representar y saber que objeto estas representando, siempre que tienes un array debes iterarlo para poder interactuar con cada elemento.

Víctor Hugo Rivas Sánchez

student•

Recuerda que estás recorriendo cada objecto "lugar" del arreglo "lugares". Entonces, necesitas indicar la propiedad de cada elemento lugares: lugar.nombre, lugar.active, etc.

Andrea Angelica Fernandez Villa

student•

Esta validacion es correcta? Quiero que me muestre el enlace si infome.valor4 es diferente de vacio

<td *ngIf=" !informe.valor4>
	<a href="#">Enlace</a>
</td>

Yesica Lizeth Cortés Pineda

teacher•

Hola!, si es correcto.

David E Lares S

student•

te faltaría cerrar la expresión con el ", pero es algo lógico.

Andrea Da Silva Pinto

student•

Una pregunta, existe el equivalente a ‘else’ para el ngIf?

Quería hacer algo así:

personas: any = [
{edad: 13, nombre: “Clarissa”},
{edad: 15, nombre: “Anniah”},
{edad: 17, nombre: “Helena”},
{edad: 23, nombre: “Andrea”},
{edad: 21, nombre: “Daniela”},
{edad: 16, nombre: “Fabiana”},
];

<ng-container *ngFor=“let persona of personas”>

<li \*ngIf=“persona.edad >= 18”>{{persona.nombre}} tiene {{persona.edad}} anhos y es mayor de edad.</li> <li \*ngIf=“persona.edad < 18”>{{persona.nombre}} tiene {{persona.edad}} anhos y es menor de edad. NO PUEDE INGRESAR AL BAR</li> </ng-container>

Así me funciona pero creo que es código innecesario o redundante

Irving Sarmiento

student•

Una forma de realizarlo, lo veo de esta manera:

<ng-container *ngFor="let persona of personas">
  <li *ngIf="persona.edad>= 18; else otraopcion">{{persona.nombre}} tiene {{persona.edad}} años y es mayor de edad.</li>
  <ng-template #otraopcion><li>{{persona.nombre}} tiene {{persona.edad}} años y es menor de edad. NO PUEDE INGRESAR AL BAR</li></ng-template>
</ng-container>

De esta forma implementas el *ngIf y else, si no se cumple la primera opción, mostrará lo que hay en el tag ng-template que tenga el nombre de la id que estamos colocando en el else.

Noé Muñoz

student•

Qué debo hacer? pues me sale esto en consola: Angular is running in the development mode. Call enableProdMode() to enable the production mode.

Diego Forero

Team Platzi•

Solo te esta informando que estas en modo de desarrollo, para enviar a producción tu aplicación debes ejecutar enableProdMode() para que deje todo en modo de producción. No es un error solo es informativo.

Isaí Ramírez

student•

oye @GOLLUM23 donde tengo que ejecutar eso de ProdMode?

Harold David Hurtado Cortes

student•

++app.component.ts++

Personas : any = [ {Nombre: 'Juan Tamariz', Edad: '23'}, {Nombre: 'Ema Madera de Gallo', Edad: '42'}, {Nombre: 'Omar Motta', Edad: '33'}, {Nombre: 'Elsa Patero', Edad: '50'}, {Nombre: 'Gustavo Racho', Edad: '63'}, {Nombre: 'Elsa Badillo', Edad: '9'} ];

App.component.html

<ul> <ng-container *ngFor="let persona of Personas"> <li *ngIf="persona.Edad>=34">{{persona.Nombre}}</li> </ng-container> </ul>

Marcelo Fontana

student•

Importante
<ng-container> -> se comporta similar al <div> pero a diferencia de este último no agrega elementos al DOM

Guido Varela Coletta

student•

.ts

  locales = [
  	{abre:9,cierra:18,nombre:'Ferreteria'},
  	{abre:8,cierra:18,nombre:'Zapateria'},
  	{abre:6,cierra:17,nombre:'Churreria'},
  	{abre:11,cierra:21,nombre:'Fiambreria'}
  ];

HTML

		<ng-container *ngFor="let locales of locales">
			<li *ngIf='locales.abre > 7 && locales.cierra < 19'>
				<!-- *ngIf='condicion' -->
				{{locales.nombre}}, desde las {{locales.abre}}, hasta las {{locales.cierra}}
			</li>
		</ng-container>

XAVIER MALDONADO

student•

disculpen, alguien sabe como le hace para escribir en varias lineas al mismo tiempo?

Diego Forero

Team Platzi•

En los IDE’s de jetbrains como phpstorm puedes usar el siguiente.

Primero presionas shift + alt + insert esto te pasara el modo de selección de columna, luego simplemente con shift y el cursos hacia arriba o abajo seleccionas las lineas.

Otra opción es usar alt + j este permite seleccionar la siguiente ocurrencia de la palabra que esta seleccionada inicialmente.

Alejandro García

student•

Para VisualStudtioCode es simplemente manteniendo pulsado la tecla “Alt” y haciendo click allá donde quieres tener el cursor multiplicado. Luego ya puedes escribir o borrar de manera normal.