Concepto de ngIf en Angular 2

1. Ocultar componentes en CSS vs. ngIf en Angular 2
2. Expresiones en ngIf en Angular 2
3. Pasos para usar ngIf en Angular 2

En Angular 2, la directiva ngIf es una de las directivas más sencillas y útiles de Angular 2. Se usa para mostrar u ocultar condicionalmente elementos HTML en función de la evaluación de una expresión.

La directiva ngIf evalúa una expresión, y si se evalúa como verdadera, representará un elemento dado. Si no, no renderizará ese elemento en absoluto.

Esta directiva ayuda a reducir la cantidad de elementos DOM cuando varias vistas comparten características comunes.

Este artículo te enseñará todo sobre ngIf.

Ocultar componentes en CSS vs. ngIf en Angular 2

Aunque HTML carece de una declaración if, los atributos de visualización y visibilidad en CSS se pueden usar para ocultar secciones de la página.

Podemos agregar o eliminar propiedades CSS de un elemento HTML y ocultar un elemento de la página usando JavaScript. Sin embargo, esto no es lo mismo que ngIf.

Si un elemento está oculto en ngIf, no existe en la página.

Si usa Chrome Dev Tools para investigar la página, no verá ningún elemento HTML en el DOM.

Expresiones en ngIf en Angular 2

La directiva ngIf acepta cualquier frase mecanografiada válida como entrada, no solo un booleano. A continuación, se evaluará la minuciosidad de la expresión para determinar si el elemento debe mostrarse o no.

También podemos enviar textos, arrays y objetos a ngIf además de booleanos.

Pasos para usar ngIf en Angular 2

Se deben seguir los siguientes pasos para usar ngIf en Angular 2:

Ejemplo:

Analicemos un ejemplo completo de ng-if en angular 2.

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: 
    `<h1 *ngIf=" 34< 100" >I'm Adil</h1> 
    <h1 *ngIf="3>1" > I'm John</h1>
    <h1 *ngIf="46<200" >I'm Steven</h1>`,
})
export class AppComponent  {
 }

Haga clic aquí para ver la demostración en vivo del código anterior.