Directiva ngIf

ngIf es una directiva estructural en Angular que se utiliza para mostrar o ocultar elementos del DOM según una condición dada. Esta directiva evalúa una expresión booleana y, si el resultado es true, el elemento al que se aplica se renderiza en el DOM; si es false, el elemento se elimina del DOM.

La sintaxis básica de ngIf en un template de Angular es la siguiente:

<div *ngIf="condicion">
  <!-- Contenido a mostrar si la condición es verdadera -->
</div>

Donde condicion es una expresión booleana que determina si el contenido dentro del div debe mostrarse o no.

Ejemplo de uso de ngIf:

import { Component } from '@angular/core';

@Component({
  selector: 'app-ejemplo-ngif',
  template: `
    <div *ngIf="mostrarContenido">
      <p>Este contenido se mostrará si mostrarContenido es true.</p>
    </div>
    <button (click)="toggleMostrarContenido()">Mostrar/Ocultar Contenido</button>
  `,
})
export class EjemploNgIfComponent {
  mostrarContenido = false;

  toggleMostrarContenido() {
    this.mostrarContenido = !this.mostrarContenido;
  }
}

En este ejemplo, *ngIf="mostrarContenido" asegura que el <div> y su contenido se mostrarán solo si mostrarContenido es true. El botón "Mostrar/Ocultar Contenido" cambia el valor de mostrarContenido para mostrar u ocultar dinámicamente el contenido en función de la interacción del usuario.

Categor?as