Angular ngIf, opciones y componentes

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:

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() {
  }

}

1. Angular

Cecilio Álvarez Caules

Cecilio Álvarez Caules Oracle Java Certified Architech