A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Uso de *ngIf

11/21
Recursos

El condicional 鈥淚f鈥聽es un聽鈥淚f鈥 en Javascript, en Java, en PHP, en Python o en cualquier lenguaje. Angular posibilita utilizar este condicionante embebido en el HTML para mostrar o no un elemento. Su sintaxis es algo particular, est谩 compuesta por un聽asterisco聽seguido de las iniciales caracter铆sticas de Angular聽鈥渘g鈥聽y la palabra聽鈥淚f鈥.

<div *ngIf="isPlatzi">Hola, soy Platzi</div>

Si la condici贸n dentro del聽鈥淚f鈥聽se cumple, se mostrar谩 el聽<div>聽con el respectivo contenido dentro. De lo contrario, el usuario no ver谩 dicho elemento en el navegador. En la condici贸n del If puedes colocar聽cualquier operador l贸gico:

tabla-angular.png

If 鈥 else

Para usar un聽else聽en Angular, la sintaxis es algo especial. Debes crear un template en tu c贸digo HTML usando la etiqueta que provee Angular llamada聽<ng-template>聽con una聽Variable de Template, comenzando con聽#, para hacer referencia a este elemento desde tu聽If.

<div *ngIf="isPlatzi; else templateElse">Hola, soy Platzi</div>
<ng-template #templateElse>
    <div>No soy Platzi</div>
</ng-template

Si la condici贸n del聽If聽no se cumple,聽seguido de punto y coma, se coloca la sentencia聽else聽haciendo referencia a聽templateElse, que es el nombre de la variable del template a mostrar en su lugar.

Aporte creado por: Kevin Fiorentino.

Aportes 6

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Tambien pueden usar then como condicionales si se cumple.
Ejemplo:

<input type="text" required [(ngModel)]="person.name">
<P *ngIf="person.name == 'liz';then thenMyBlock else otherElseMyBlock"> Hola soy alexis</P>
<ng-template #thenMyBlock>
  <p>Hola liz</p>
</ng-template>
<ng-template #otherElseMyBlock>
  <p>Ingresa la palabra liz</p>
</ng-template>

Que sintaxis mas agradable, siempre habia escuchado que angular es mas complicado que react, me esta gustando mas angular, aunque lo que si veo es que es mas extenso

Las directivas *ngIf y *ngFor son atributos que podemos agregarle a los elementos HTML que nos permiten en el caso del *ngIf condicionar si dicha marca debe agregarse a la p谩gina HTML.

La directiva *ngFor nos permite generar muchos elementos HTML repetidos a partir del recorrido de un arreglo de datos.

ngIf

Estructura de control:

<h1>ngIf</h1>
<input type="text" required [(ngModel)]="person.name" />
<p *ngIf="person.name === 'aaron'">Soy Aaron</p>
<p *ngIf="person.name === 'julian' && person.age === 18; else myBlock">Soy Julian</p>
<ng-template #myBlock>
  <p>Bloque de else</p>
</ng-template>

Muy buen curso, hasta el momento ha sido muy simple y claro.