En el concepto anterior trabajamos en profundidad la sintaxis de la directiva estructural *ngFor, ahora nos toca trabajar con la directiva estructural *ngIf.
La directiva estructural *ngIf permite mostrar u ocultar elementos del DOM.
Si tenemos un atributo en el archivo *.ts:
alerta=true;
Luego en el archivo HTML mediante la directiva *ngIf:
<h1 *ngIf="alerta">Todos los precios se encuentran rebajados 50%</h1>
Como la variable almacena un 'true', luego la etiqueta 'h1' se muestra en la página. Si la variable 'alerta' se le asigna un 'false' la etiqueta 'h1' no se muestra en la página (no se inserta en el DOM)
Recordemos que una etiqueta solo puede tener una directiva estructural, luego si podemos disponer dentro de una etiqueta interior otro directiva estructural.
Por ejemplo si tenemos declarado el siguiente array en el archivo *.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
personas: Persona[] = [
new Persona('juan', 33),
new Persona('ana', 15),
new Persona('luis', 56),
new Persona('carla', 45)
];
}
class Persona {
constructor(public nombre: string, public edad: number) { }
}
Luego podemos recorrer mediante un *ngFor el arreglo y verificar cada edad para ver si mostramos el elemento HTML 'span':
<table>
<tr>
<td>Nombre</td>
<td>Edad</td>
</tr>
<tr *ngFor="let persona of personas">
<td>{{persona.nombre}} <span *ngIf="persona.edad>=18">(Mayor)</span></td>
<td>{{persona.edad}}</td>
</tr>
</table>
Se verifica la edad de cada persona y si es mayor o igual a 18 luego la directiva estructural *ngIf se verifica verdadera por lo que la etiqueta 'span' se incorpora al DOM de la página web:
*ngIf="persona.edad>=18">(Mayor)</span>
Una parte opcional de la directiva estructural *ngIf es la sección del else. La sintaxis que debemos utilizar para el else es:
Si tenemos un atributo en el archivo *.ts:
estado=true;
Luego en el archivo HTML mediante la directiva *ngIf con else podemos mostrar uno u otro título:
<h1 *ngIf="estado; else fueradeservicio">Bienvenido al sitio</h1> <ng-template #fueradeservicio><h1>Sitio fuera de servicio</h1></ng-template>
Es obligatorio cuando definimos la sección del else definir una etiqueta 'ng-template', ya que no podemos disponer #fueradeservicio en la etiqueta 'h1'.
Podemos disponer operadores lógicos en el valor asignado a la directiva estructural *ngIf, si tenemos los atributos definidos en la clase:
estado=true; dia=9;
Luego podemos disponer una condición compuesta:
<h1 *ngIf="estado && dia>=10; else fueradeservicio">Bienvenido al sitio</h1> <ng-template #fueradeservicio><h1>Sitio fuera de servicio</h1></ng-template>
En este caso se ejecuta el else debido a que el atributo dia tiene un valor que no es mayor o igual a 10.
Podemos disponer la llamada a un método o función que retorne un valor boolean en la directiva estructural *ngIf:
export class AppComponent {
edad = 52;
mayorEdad(): boolean {
if (this.edad >= 18)
return true;
else
return false;
}
}
Luego llamamos al método en la directiva:
<p *ngIf="mayorEdad()">Es mayor de edad</p>
Retorna true el método y por lo tanto se muestra el párrafo.
Hay otra sintaxis que podemos utilizar cuando tenemos tanto actividades por el verdadero como por el falso.
Si tenemos el atributo:
estado=true;
Luego tenemos la sintaxis:
<ng-template *ngIf="estado;then serviciocorrecto else fueradeservicio"></ng-template> <ng-template #serviciocorrecto><h1>Bienvenido al sitio</h1></ng-template> <ng-template #fueradeservicio><h1>Sitio fuera de servicio</h1></ng-template>
Es una alternativa poco usada, pero disponible.
La microsintaxis de angular le permite configurar una directiva en una cadena compacta y amigable. El analizador de microsintaxis traduce esa cadena en atributos de una etiqueta <ng-template>. La microsintaxis se aplica también para la directiva *ngIf.
Por ejemplo la sintaxis del problema anterior:
<h1 *ngIf="alerta">Todos los precios se encuentran rebajados 50%</h1>
El transpilador de Angular procede a modificar la directiva estructural *ngIf por un elemento <ng-template>:
<ng-template [ngIf]="alerta"> <h1>Todos los precios se encuentran rebajados 50%</h1> </ng-template>
Es decir encierra el elemento HTML 'h1' por el elemento 'ng-template', el cual define un enlace de propiedad al encerrarlo entre corchetes.
Si disponemos de else la transformación es:
<ng-template [ngIf]="estado" [ngIfElse]="fueradeservicio"> <h1>Bienvenido al sitio</h1> </ng-template> <ng-template #fueradeservicio> <h1>Sitio fuera de servicio</h1> </ng-template>
Recordar que normalmente se utiliza la sintaxis *ngIf para implementar esta directiva estructural, el conocer la transformación es importante para cuando creemos nuestras propias directivas.