¿Cómo usar *ngIf else en AngularJS?

Introducción: la directiva ngIf se usa para mostrar u ocultar partes de una aplicación angular. Se puede agregar a cualquier etiqueta, es una etiqueta, plantilla o selectores HTML normales. Es una directiva estructural, lo que significa que incluye plantillas basadas en una condición restringida a booleanos. Cuando la expresión se evalúa como verdadera, ejecuta/muestra la plantilla proporcionada en la cláusula «entonces». O cuando la expresión se evalúa como falsa, muestra la plantilla proporcionada en la cláusula «else». Si no hay nada en la cláusula else, por defecto se mostrará en blanco.

Sintaxis:

ngIf with an "else" block

<div *ngIf="condition; else elseStatement">
    when condition is true.
</div>
<ng-template #elseStatement>
    when condition is false.
</ng-template>
<!--It can be seen that the else 
    clause refers to ng-template,
    with the label #elseStatement -->

Internamente crea dos <ng-template>, uno para la declaración «then» y otro para «else» . Entonces, cuando la condición es verdadera para ngIf, <ng-template>se muestra el contenido de los no etiquetados. Y cuando es falso, la etiqueta <ng-template>se ejecuta.

Acercarse:

1. Como sabemos, la declaración ngIf else funciona en una variable que tiene un tipo booleano. Cree una aplicación angular y muévase a src/app . Primero, necesitamos definir una variable, digamos «verificar» en app.component.ts con un valor verdadero o falso.

   <!-- Define a variable say "check" with      value true/false in app.component.ts --> import { Component } from '@angular/core';    @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css'] })    export class AppComponent {   check:boolean = true; }

2. Después de definir una variable, muévase a app.component.html y cree dos divisiones usando clases de arranque. Vaya a la aplicación angular y escriba el comando npm install bootstrap . La primera división es para la condición «verdadera» y la que está dentro de <ng-template> es para la condición falsa. Hemos declarado que el cheque es verdadero, por lo que obtenemos una división verde que dice que la condición es verdadera. Si la verificación era falsa, se mostraría una división roja que decía condición falsa.

   <!-- *ngIf else --> <div class="container-fluid">     <div class="row bg-success              text-light h1 justify-content-center             align-items-center" *ngIf="check;             else elseStatement"              style="height:150px">Condition true     </div>      <ng-template #elseStatement>     <div class="row bg-danger             text-light h1 d-flex              justify-content-center align-items-center"             style="height:150px">Condition false     </div>   </ng-template> </div>

Producción:

Producción:

ventajas:

• El bloque del lenguaje de programación "if"admite operadores lógicos, por lo que lo hace "ngIf". Tiene soporte para todos los operadores lógicos como AND, OR, NOT, etc.
• ngIf ayuda a evitar que no se pueda leer el error de propiedad de indefinido. Supongamos que hay una propiedad enlazada llamada «estudiante». Estamos tratando de acceder a la subpropiedad «nombre» del estudiante que tiene el valor «Santosh». Si el estudiante es nulo, devolverá un error indefinido. Entonces, si buscamos nulo antes de acceder a la subpropiedad, evitaremos el error usando *ngIf.

  <!--This may error--> <div>   {{student.name}} </div>    <!--check using ngIf--> <p *ngIf="student">   {{student.name}} </p>

  Producción:

  Santosh

• ngIf vs Hidden: Quizás se pregunte por qué tenemos que usar ngIf cuando tenemos atributos ocultos en HTML5. Sí, hacen el mismo trabajo pero todavía hay una diferencia. El atributo oculto oculta el elemento seleccionado del DOM pero el elemento aún existe en el DOM. Mientras que ngIf se deshace de la parte seleccionada del DOM. No interviene con CSS.

  <!--check is defined in component.ts      with value true (boolean)--> <div [hidden]="!check">   Show this only if "check" is true </div>

  Producción:

  Show this only if "check" is true