Hoy vamos a hablar Angular ngIf como directiva y las opciones que soporta. Para ello en un proyecto de Angular nos vamos a construir un componente sencillo que le denominaremos nota. Este componente albergará la variable nota del examen de un alumno.
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-nota', templateUrl: './nota.component.html', styleUrls: ['./nota.component.css'] }) export class NotaComponent implements OnInit { nota:number; constructor() { this.nota=5; } ngOnInit() { } }
Una vez tenemos el componente construido nos queda ver como quedaría la plantilla que muestra la nota. En este caso de partida es relativamente sencillo simplemente imprimimos la nota :
<p>Nota:{{nota}}</p>
El interface de usuario nos mostrará la nota:
Manejo de Eventos
Es momento de añadir al interface dos botones que nos permitan modificar los valores de la nota e incrementar o decrementarlo según nuestras necesidades:
<p>Nota :{{nota}} <input type="button" value="+" (click)="nota=nota+1"> <input type="button" value="-" (click)="nota=nota-1"> </p>
El interface se actualiza y podemos cambiar los valores de la nota:
Angular NgIf
Es momento de usar la directiva ngIf para que nos imprima dependiendo del valor numérico de la nota una calificación. Podríamos tener como punto de partida:
<p *ngIf="nota>=5">has aprobado</p>
Esto nos imprimirá en la página que hemos aprobado si la nota es superior a 5:
Podemos hacer una operación similar en el caso de que la nota este entre 7 y 9 de tal forma que se imprima notable apoyándonos en un operador and (&&).
<p *ngIf="nota>=7 && nota<9">notable</p>
Angular ngIf
Modificamos el componente para que incluya dos propiedades adicionales y podamos escribir condiciones más complejas:
export class NotaComponent implements OnInit { nota:number; asignatura:string; edad:number; constructor() { this.asignatura="matematicas"; this.nota=5; this.edad=16; } ngOnInit() { } }
De esta forma podemos construir condiciones como las siguientes:
<p *ngIf="(nota>=9 && asignatura=='matematicas') || (edad==16)">estudia aeronautica</p>
En este caso si la nota es superior a 9 y la asignatura es matemáticas o ha aprobado el examen con 16 años , le recomendamos estudiar Areonaútica.
Condiciones y Comportamiento
Sin embargo cuando las condiciones se complican suele ser mejor proceder de otra forma ya que al final las condiciones no quedan claras debido a su tamaño.
Angular ngIf y Componentes
En vez de tener un ngIf inmenso con operadores como && || o ! es preferible definir esa condición a nivel del propio componente de tal forma que el interface de usuario quede mucho más cómodo.
Vamos a verlo:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-nota', templateUrl: './nota.component.html', styleUrls: ['./nota.component.css'] }) export class NotaComponent implements OnInit { nota:number; asignatura:string; edad:number; constructor() { this.asignatura="matematicas"; this.nota=5; this.edad=16; } esMuyListo():boolean { if((this.nota>=9 && this.asignatura=='matematicas') || (this.edad==16)) { return true; } else { return false; } } }
En este caso hemos implementado una función interna al componente que decide si el alumno es muy listo o no. La pasamos a invocar desde la plantilla:
<p *ngIf="esMuyListo()">estudia aeronautica</p>
Siempre que la lógica de las sentencias ngIf se complique suele ser mucho más cómodo moverla a los componentes para un uso más claro.
Otros artículos relacionados
- Angular Modules y el uso de servicios
- Angular ngFor la directiva y sus opciones
- TypeScript Union Type y como usarlos