Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 13D : 6H : 20M : 57S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Curso de Angular 4

Curso de Angular 4

Eduardo Ibarra

Eduardo Ibarra

Directiva ngIf15/80

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

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>

para editar varios elementos a la vez como hace e, l en Visual studio Code solo tienes que pulsar CTRL + ALT y la flecha de desplazamiento seleccionando las lineas que quieres editar

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>

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>```

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

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>

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

Muy buena directiva

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

.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>	
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>

BUena classes

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>
  • *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>

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>

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

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>

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

<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
    }
  ];

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

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>

para editar varios elementos a la vez como hace e, l en Visual studio Code solo tienes que pulsar CTRL + ALT y la flecha de desplazamiento seleccionando las lineas que quieres editar

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>

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>```

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

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>

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

Muy buena directiva

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

.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>	
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>

BUena classes

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>
  • *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>

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>

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

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>

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

<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
    }
  ];

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