La instrucción if...else en Angular

Presentaremos cómo usar declaraciones if en aplicaciones Angular y discutiremos ejemplos.

Usando la instrucción if en Angular

En programación, las sentencias if son bloques lógicos. Estas declaraciones condicionales le dicen a la computadora qué hacer cuando una condición en particular es verdadera o falsa.

En la era moderna de las aplicaciones web, las declaraciones if hacen que la vida de los programadores sea más fácil de entender cuándo ejecutar un bloque de código específico en función de las condiciones.

Hay diferentes formas en que podemos usar declaraciones if en angular usando *ng-if u otro método simple que discutiremos en un ejemplo.

Vamos a crear una nueva aplicación usando el siguiente comando:

# angular
ng new my-app

Después de crear nuestra nueva aplicación en angular, iremos a nuestro directorio de aplicaciones usando este comando.

# angular
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

Luego, en app.component.ts, estableceremos una variable statement como false. Usaremos esta variable para ejecutar nuestro código.

# angular
statement = false;

Ahora, en app.component.html, crearemos una plantilla usando la variable statement que mostrará contenido diciendo que la declaración es verdadera si hemos establecido la variable en true.

Mostrará que la declaración es falsa si hemos establecido la variable en false.

# angular
<hello name="{{ name }}"></hello>
<h2>{{ statement ? 'This statement is True' : 'This statement is false' }}</h2>

Probemos nuestra aplicación para ver si funciona al cambiar el valor statement.

Producción:

Cambie el valor de la declaración, configúrelo como true y compruebe cómo funciona.

Producción:

Entonces, como puede ver, cuando cambiamos el valor de la variable statement, el código se ejecuta y muestra el valor que queremos ver usando un método simple de declaración.

Imaginemos un bloque que queremos mostrar dentro de un div donde se ejecuta la sentencia if-else. Podemos usar la declaración *ng-if y establecer los identificadores de los bloques que queremos mostrar cuando la condición es correcta o incorrecta.

Estableceremos una nueva variable elemento como 1. Nuestro código en app.component.ts se verá como a continuación.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  statement = true;
  element = 1;
}

Crea una plantilla en app.component.html. Tendremos un div con una declaración *ng-if que mostrará un bloque trueBlock, y si el valor de element no es 1, entonces mostrará el bloque con una identificación de falseBlock.

<div *ngIf="element == 1; then trueBlock; else falseBlock"></div>

<ng-template #trueBlock><button>Login</button></ng-template>
<ng-template #falseBlock><button>Logout</button></ng-template>

Veamos cómo funciona.

Producción:

Prueba a cambiar el valor del elemento y comprueba cómo funciona.

# angular
element = 2;

Producción:

Como puede ver en el ejemplo anterior, podemos mostrar fácilmente los bloques de código usando la instrucción *ng-if y llamando a la identificación del bloque.