Tabla de Contenidos
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 :
Nota:{{nota}}
El interface de usuario nos mostrará la nota:
Es momento de añadir al interface dos botones que nos permitan modificar los valores de la nota e incrementar lo decrementarlo según necesidades:
Nota: <input type="button" value="+" (click)="nota=nota+1"> <input type="button" value="-" (click)="nota=nota-1">
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:
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 (&&).
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:
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.
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; } } ngOnInit() { } }
Este código se puede referenciar en la plantilla sin problemas,
<p *ngIf=”esMuyListo()”>estudia aeronautica</p>
El resultado será idéntico.
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.
Deja una respuesta