ngIf | ngFor - Angular 5

NgIf:

NgIf es una propiedad de Angular que permite evaluar valores booleanos sea true or false.

Asignamos una variable booleano llamado  activar, el cual le damos un valor true.En la siguiente imagen , le estamos diciendo a nuestra etiqueta <p> , que se muestre en nuestra pagina web cuando  activar  sea true.

Pero si queremos ocultar el contenido le asignamos a activar el valor de false.

NgFor:

NgFor es una propiedad de Angular que nos permite recorrer o mostrar un array o lista de datos almacenados.

Crearemos una lista llamada Colores.
Es muy importante respetar las mayúsculas y minúsculas que asignamos a nuestras variables.

 EJERCICIO:

En este ejercicio , haremos un repaso de todo lo aprendido. Crearemos una función que permita mostrar un array o lista de datos almacenados al darle click a un botón que crearemos.

 app.component.html

123456

<div *ngIf="activar">    <p *ngFor="let paises of Paises">        {{paises}}    </p></div><button (click)="mostrar()">{{activar ? 'ocultar':'mostrar'}}</button>

app.component.ts

12345678910111213141516

import { Component } from '@angular/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  activar:boolean = true;  Paises=['Peru','Ecuador','Colombia'];  mostrar()  {    this.activar = !this.activar;  }}

Esto es lo que sucede cuando damos click al boton y llamamos a la funcion mostrar

Recuerden que el signo ! significa diferente, si decimos: 4 !=5 estamos diciendo que 4 es diferente de 5
y la respuesta es verdadero.
Pero si decimos 5!=5, 5 diferente de 5, la respuesta es falso.

Gracias y nos vemos en el siguiente blog! :D