Usar ngIf Else en Angular

1. Use *ngIf como una función independiente en Angular
2. Usa el *ngIf con else
3. Use las declaraciones *ngIf con else y then en Angular

Cuando construimos aplicaciones web como desarrolladores, necesitamos configurar la aplicación web para ajustar las páginas sobre la marcha; la declaración *ngIf se vuelve útil. *ngIf se usa para manipular elementos HTTP representados en una página.

Funciona en una condición en la que le decimos a la aplicación web que realice una determinada función después de que se hayan establecido algunos parámetros. Y cuando tales parámetros no están en su lugar, debería realizar otro tipo en su lugar.

Realizaremos algunas funciones usando solo el *ngIf. Luego combinaremos la instrucción *ngIf con la declaración else y veremos qué es posible. Por último, usaremos la combinación *ngIf else then para manipular elementos HTTP.

Use *ngIf como una función independiente en Angular

Así que aquí, usaremos la declaración *ngIf junto con las condiciones true o false.

Haremos todo el trabajo en el app.component.html.

<h1>*ngIf in Angular</h1>
<h2 *ngIf="true">
  Hi, Youtube
</h2>

La página web muestra Hi, Youtube cuando la condición *ngIf se establece en verdadero. Una vez que se cambia a falso, el Hi, Youtube desaparece de la página web.

También podemos pasar la función a través de app.component.ts así:

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";
  displayMe=true;
}

Y luego cambiamos el valor *ngIf a displayMe como se muestra a continuación:

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe">
  Hi, Youtube
</h2>

Al igual que el primer ejemplo, las reglas básicas funcionan igual.

Usa el *ngIf con else

Cuando la condición *ngIf se combina con la declaración else, nos ayuda a decidir qué contenido queremos que aparezca en la página web en cualquier momento.

Este método requiere que anidemos la otra declaración que queremos que aparezca en Hola, Youtube dentro de la etiqueta ng-template.

El app.component.html se verá así:

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe else elseBlock">
  Hi, Youtube
</h2>
<ng-template #elseBlock>
<h2>
    Hi, Twitter
    </h2>
</ng-template>

Notará que usamos la declaración else junto con la condición *ngIf, lo que nos permite tener un mejor control sobre el contenido de la página web.

Entonces, en app.component.ts, cuando displayMe tiene un valor verdadero, se mostrará Hi, Youtube. Cuando sea falso, se mostrará Hi, Twitter.

Use las declaraciones *ngIf con else y then en Angular

En el ejemplo anterior, nos presentaron la plantilla ng, que funciona junto con la instrucción else. Cuando se usa con *ngIf y else, la instrucción then permite manipular contenidos dentro de la plantilla ng.

Es una solución bienvenida para un codificador que quiere mantener un archivo de código estructurado y bien organizado.

Nuestro app.component.html quedará configurado como tal:

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe; then ifBlock else elseBlock">
  Hi, Youtube
</h2>
<ng-template #ifBlock>
<h2>
    Hi, Google
    </h2>
</ng-template>
<ng-template #elseBlock>
<h2>
    Hi, Twitter
    </h2>
</ng-template>

Así, en el app.component.ts, cuando el displayMe tenga un valor verdadero, se mostrará Hi, Google, y cuando sea el valor falso, se mostrará Hi, Twitter.