Ng-If en Angular con múltiples condiciones

1. Funcionamiento de ng-if en AngularJS
2. <ng-template> en AngularJS
3. Usando ngIf con múltiples condiciones
4. Compara cadenas para la igualdad usando *ngIf

Una directiva ngIf es una herramienta poderosa en AngularJS (https://angular.io/features) que le permite mostrar y ocultar dinámicamente contenido HTML. También puede mostrar u ocultar contenido en función de una expresión. Si la declaración de la directiva ng-if se evalúa como un valor booleano VERDADERO, el elemento se inserta en la vista HTML; de lo contrario, se elimina del DOM por completo. Este artículo discutirá el AngularJS ng-if con múltiples condiciones.

Sintaxis:

<element ng-if="expression"**>
</element>**

Funcionamiento de ng-if en AngularJS

Es fundamental comprender que todas las directivas integradas proporcionadas por el marco AngularJS siempre se designarán con el prefijo ng en el marco AngularJS. La declaración de la directiva ng-if se evalúa como un valor booleano, como True o False, y el elemento se muestra en el HTML DOM de acuerdo con este valor.

Cuando la evaluación de la expresión ng-if devuelve un valor Falso, el elemento se elimina del DOM. Otra cosa a tener en cuenta es que cuando se elimina un elemento HTML con ngIf, se destruye su ámbito, y cuando se vuelve a poner el elemento en la vista, se establece un nuevo ámbito.

Aquí, debe comprender la diferencia entre la directiva angular ng-if y ng-show antes de profundizar.

Cuando la evaluación de la expresión de la directiva ng-if es FALSE, el elemento se elimina del DOM; sin embargo, cuando la evaluación de la expresión de la directiva ng-show es FALSA, el elemento se oculta en el DOM en lugar de eliminarse, lo que se hace utilizando el atributo CSS de display hidden.

Ejemplo

Si tiene experiencia en PHP, puede escribir bloques if-else directamente en plantillas HTML, como se ve a continuación.

if(display){
  <div>I am here</div>
}

else{
  <div>
   I am not here
  </div>
 }

Sin embargo, no podemos usar corchetes en HTML para escribir bloques if-else porque solo los elementos de marcado deben incluirse en el archivo HTML. La solución ideal será reemplazar los bloques condicionales por algo.

<ng-template> en AngularJS

Antes de la directiva fundamental, ngIf, ¿ha considerado alguna vez el asterisco (*)? Al usar elementos HTML en la directiva *ngif, angular envolverá ese elemento en una etiqueta <ng-template> con la condición proporcionada. Para obtener más información sobre ng-template, haga clic aquí.

<ng-template [ngIf]="display">

  <div>I am Playing</div>

</ng-template> 

En el marco Angular, <ng-template> es un pseudo elemento que no se incluirá en la salida HTML final. Solo se insertarán los elementos dentro de la <ng-template>. Si el elemento tiene alguna característica, como una identificación o una clase, utilícela. Esos elementos se agregarán al elemento <div> dentro de <ng-template>.

<div *ngIf="display" class="information" id="info">
  I am Playing
</div> 
 
 <ng-template [ngIf]="display">
    <div class="information" id="info">
      I am Playing
    </div>
 </ng-template>

Usando ngIf con múltiples condiciones

Analicemos las siguientes condiciones de AngularJS ng-if.

La primera es la condición AND, la segunda es la condición OR, y la tercera es la condición NOT.

Y Condición en *ngIf (&&)

Para determinar la credibilidad de una declaración *ngIf, podemos emplear numerosas condiciones con el operador lógico AND (&&). El elemento se agregará al DOM si se cumplen todas las condiciones. El siguiente ejemplo demuestra cómo AngularJS evalúa una condición Y:

<div *ngIf="isCar && isBike">

 <span>{{Name}}</span>

</div>

O Condición en *ngIf (||)

Si solo una de las condiciones es verdadera, puede usar *ngIf para mostrar el elemento con la ayuda del operador OR (||). El siguiente fragmento de código demuestra el uso de la condición OR en *ngIf.

 <div *ngIf="isCar || isBike">
   // Show Price comparison chart
 </div>

O Condición en *ngIf (!)

Para revertir la condición *ngIf, podemos usar el operador NOT (!) como se ve a continuación.

<div *ngIf="!isCar">
	//Show the Prices of Bikes
</div>

Compara cadenas para la igualdad usando *ngIf

Dentro de la instrucción *ngIf, podemos aplicar los operadores doble igual (==) o triple igual (===) para comparar cadenas en busca de igualdad.

Al comparar cadenas para la igualdad, es sencillo perder u olvidar usar el doble igual o el triple igual y, en su lugar, usar el operador de asignación (igual simple).

Cuando usa un operador de asignación dentro de *ngIf, obtendrá el error Parser Error: Bindings cannot contain assignments at column, como se ve a continuación.

<div *ngIf="Items.type = 'Cosmetics'">
// Show the Cosmetics items
</div>

Al comparar una cadena estática dentro de un *ngIf, se deben usar comillas. No es necesario utilizar comillas al comparar variables de cadena de componentes.