Renderizado condicional con @if

Sintaxis @if y @else

La nueva sintaxis de control de flujo introducida en Angular 17 revoluciona la forma de escribir condiciones en las plantillas. La directiva @if reemplaza completamente a la antigua *ngIf, ofreciendo una sintaxis más limpia y legible que se asemeja a las estructuras condicionales nativas de TypeScript.

Sintaxis básica de @if

La forma más simple de utilizar @if es evaluando una expresión booleana:

@if (mostrarMensaje) {
  <p>Este mensaje se muestra cuando mostrarMensaje es true</p>
}

Esta nueva sintaxis utiliza llaves para delimitar el contenido que se renderizará condicionalmente, eliminando la necesidad de elementos adicionales como <ng-container> que eran comunes con *ngIf.

Sintaxis completa con @else

Para manejar ambos casos de una condición, Angular 20 proporciona la cláusula @else:

@if (usuario.estaLogueado) {
  <div class="usuario-panel">
    <h3>Bienvenido, {{ usuario.nombre }}</h3>
    <button>Cerrar sesión</button>
  </div>
} @else {
  <div class="login-panel">
    <h3>Iniciar sesión</h3>
    <button>Entrar</button>
  </div>
}

La cláusula @else debe colocarse inmediatamente después del bloque @if, sin espacios ni elementos intermedios.

Condiciones múltiples con @else if

Para condiciones encadenadas, Angular 20 soporta @else if, permitiendo evaluar múltiples expresiones de forma secuencial:

@if (usuario.rol === 'admin') {
  <div class="panel-admin">
    <h2>Panel de Administración</h2>
    <button>Gestionar usuarios</button>
  </div>
} @else if (usuario.rol === 'editor') {
  <div class="panel-editor">
    <h2>Panel de Editor</h2>
    <button>Crear contenido</button>
  </div>
} @else {
  <div class="panel-usuario">
    <h2>Panel de Usuario</h2>
    <button>Ver perfil</button>
  </div>
}

Expresiones complejas

La directiva @if puede evaluar cualquier expresión que devuelva un valor truthy o falsy:

<!-- Comparaciones numéricas -->
@if (productos.length > 0) {
  <p>Tienes {{ productos.length }} productos en tu carrito</p>
} @else {
  <p>Tu carrito está vacío</p>
}

<!-- Verificación de propiedades anidadas -->
@if (usuario?.perfil?.configuraciones?.notificaciones) {
  <div class="notificaciones-activas">
    Las notificaciones están habilitadas
  </div>
}

<!-- Expresiones con operadores lógicos -->
@if (usuario.estaActivo && usuario.tienePermisos) {
  <button class="btn-primary">Acceder al sistema</button>
} @else {
  <button class="btn-disabled" disabled>Acceso denegado</button>
}

Ventajas sobre *ngIf

La nueva sintaxis @if ofrece mejoras significativas respecto a *ngIf:

• Mejor rendimiento: El compilador genera código más optimizado
• Sintaxis más clara: Reduce la verbosidad del código HTML
• Type safety mejorado: Mejor inferencia de tipos en las expresiones
• Menos elementos DOM: No requiere contenedores adicionales

Comparación con la sintaxis legacy

<!-- Sintaxis antigua con *ngIf -->
<div *ngIf="mostrarContenido; else sinContenido">
  <p>Contenido principal</p>
</div>
<ng-template #sinContenido>
  <p>Contenido alternativo</p>
</ng-template>

<!-- Nueva sintaxis con @if -->
@if (mostrarContenido) {
  <div>
    <p>Contenido principal</p>
  </div>
} @else {
  <p>Contenido alternativo</p>
}

La nueva sintaxis elimina la complejidad de los template references y hace el código más intuitivo para desarrolladores familiarizados con estructuras condicionales tradicionales.

Renderizado condicional

El renderizado condicional es una técnica fundamental que permite mostrar u ocultar elementos de la interfaz según el estado de la aplicación. Con la nueva sintaxis @if de Angular 20, esta práctica se vuelve más intuitiva y eficiente, adaptándose perfectamente a las necesidades dinámicas de las aplicaciones modernas.

Casos de uso comunes

El renderizado condicional encuentra aplicación en múltiples escenarios del desarrollo web:

Mostrar estados de carga

@if (cargandoDatos) {
  <div class="spinner">
    <p>Cargando información...</p>
  </div>
} @else if (datosUsuario) {
  <div class="perfil-usuario">
    <h2>{{ datosUsuario.nombre }}</h2>
    <p>{{ datosUsuario.email }}</p>
  </div>
} @else {
  <div class="error">
    <p>No se pudieron cargar los datos</p>
    <button (click)="recargarDatos()">Reintentar</button>
  </div>
}

Control de permisos y roles

@if (usuario.rol === 'administrador') {
  <div class="acciones-admin">
    <button (click)="eliminarUsuario()">Eliminar usuario</button>
    <button (click)="editarPermisos()">Editar permisos</button>
  </div>
}

@if (usuario.puedeEditar) {
  <button class="btn-editar" (click)="habilitarEdicion()">
    Editar contenido
  </button>
}

Renderizado basado en datos

Una de las ventajas principales del renderizado condicional es la capacidad de adaptar la interfaz según los datos disponibles:

@if (productos && productos.length > 0) {
  <div class="lista-productos">
    <h3>Productos disponibles ({{ productos.length }})</h3>
    <!-- Aquí iría el listado de productos -->
  </div>
} @else {
  <div class="sin-productos">
    <img src="assets/carrito-vacio.svg" alt="Carrito vacío">
    <h3>No hay productos en tu carrito</h3>
    <button [routerLink]="['/tienda']">
      Explorar productos
    </button>
  </div>
}

Componentes condicionales

El renderizado condicional permite cargar componentes específicos según las necesidades:

@if (tipoVista === 'lista') {
  <app-vista-lista [datos]="productos"></app-vista-lista>
} @else if (tipoVista === 'tarjetas') {
  <app-vista-tarjetas [datos]="productos"></app-vista-tarjetas>
} @else {
  <app-vista-tabla [datos]="productos"></app-vista-tabla>
}

Manejo de errores y estados vacíos

El renderizado condicional es esencial para crear experiencias de usuario robustas:

@if (errorServidor) {
  <div class="alerta-error">
    <h4>Error del servidor</h4>
    <p>{{ errorServidor.mensaje }}</p>
    <button (click)="reintentar()">Volver a intentar</button>
  </div>
} @else if (sinConexion) {
  <div class="sin-conexion">
    <h4>Sin conexión a internet</h4>
    <p>Verifica tu conexión e intenta nuevamente</p>
  </div>
} @else if (busquedaSinResultados) {
  <div class="sin-resultados">
    <p>No se encontraron resultados para "{{ terminoBusqueda }}"</p>
    <button (click)="limpiarBusqueda()">Limpiar búsqueda</button>
  </div>
}

Optimización del rendimiento

Una característica importante del renderizado condicional es que los elementos no renderizados no existen en el DOM, lo que mejora significativamente el rendimiento:

<!-- Solo se carga el componente pesado cuando es necesario -->
@if (mostrarGraficoComplejo) {
  <app-grafico-avanzado 
    [datos]="datosGrafico"
    [configuracion]="opcionesGrafico">
  </app-grafico-avanzado>
} @else {
  <div class="vista-simple">
    <p>{{ resumenDatos }}</p>
    <button (click)="cargarGraficoCompleto()">
      Ver gráfico detallado
    </button>
  </div>
}

Patrones de renderizado responsivo

El renderizado condicional también permite adaptar la interfaz según el dispositivo o tamaño de pantalla:

@if (esPantallaPequena) {
  <div class="menu-hamburguesa">
    <button (click)="toggleMenu()">☰</button>
    @if (menuAbierto) {
      <nav class="menu-movil">
        <a routerLink="/inicio">Inicio</a>
        <a routerLink="/productos">Productos</a>
        <a routerLink="/contacto">Contacto</a>
      </nav>
    }
  </div>
} @else {
  <nav class="menu-escritorio">
    <a routerLink="/inicio">Inicio</a>
    <a routerLink="/productos">Productos</a>
    <a routerLink="/contacto">Contacto</a>
  </nav>
}

Mejores prácticas

Para aprovechar al máximo el renderizado condicional, considera estas recomendaciones:

• Mantén las condiciones simples: Evita expresiones demasiado complejas que dificulten la lectura
• Proporciona alternativas: Siempre considera qué mostrar cuando la condición principal es falsa
• Optimiza las verificaciones: Utiliza el operador de navegación segura (?.) para evitar errores
• Considera el rendimiento: Recuerda que cambiar condiciones frecuentemente puede afectar el rendimiento

El renderizado condicional con @if transforma la manera de construir interfaces dinámicas, proporcionando una herramienta flexible y eficiente para crear experiencias de usuario que se adaptan inteligentemente al contexto y estado de la aplicación.