Angular 19: Reactividad Simple

Hola de nuevo 👋. En artículos como Tu Chatbot Open Source en VS Code o Mixins en SASS, siempre busco herramientas que hagan el código más limpio. ¡Hoy les traigo los nuevos Signals, Models y el control flow con @if, @for, @else y @empty!

1. Signals: Reactividad Sin Esfuerzo

Los Signals son variables "inteligentes" que actualizan la UI automáticamente.

// Ejemplo: Contador reactivo  
import { signal, computed } from '@angular/core';  

class ContadorComponent {  
  count = signal(0);  
  double = computed(() => this.count() * 2);  

  incrementar() {  
    this.count.update(v => v + 1);  
  }  
}

¿Por qué me gustan?

• No más subscribe() o async pipe.
• Integración perfecta con los nuevos @if y @for 😉.

2. Control Flow: Olvida los ngIf y ngFor

Angular 19 introduce una sintaxis más limpia para condicionales y bucles.

@if y @else

<!-- Ejemplo: Mensaje de usuario -->  
@if (usuario()) {  
  <p>Bienvenido, {{ usuario().nombre }}</p>  
} @else {  
  <p>Inicia sesión 🔑</p>  
}

Ventaja: Más intuitivo que *ngIf y else, sin .

@for y @empty

<!-- Ejemplo: Lista de tareas -->  
@for (tarea of tareas(); track tarea.id) {  
  <div>{{ tarea.titulo }}</div>  
} @empty {  
  <p>¡No hay tareas! 🎉</p>  
}

track: Mejora el rendimiento (¡adiós a trackBy!).
@empty: Muestra contenido si la lista está vacía.

3. Models y Inputs: Validación Integrada

Con Models, podras validar Inputs automaticamente:

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

class FormularioComponent {  
  // Modelo con validación automática  
  email = model<string>('', {  
    validate: (valor) => valor.includes('@') ? null : 'Email inválido ❌'  
  });  
}

4. Inject y Effect: Código Más Limpio

Inyectar servicios sin constructor

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

class PerfilComponent {  
  servicioAuth = inject(AuthService); // ¡Magic!  
}

Effect para sincronizar datos (ejemplo: guardar en localStorage):

effect(() => {  
  localStorage.setItem('tema', tema());  
});

Ejemplo Completo: Lista de Tareas Reactiva

TS

import { signal, effect } from '@angular/core';  

class TareasComponent {  
  tareas = signal<Tarea[]>([]);  

  constructor() {  
    effect(() => {  
      console.log('Tareas actualizadas:', this.tareas());  
    });  
  }  

  agregarTarea(titulo: string) {  
    this.tareas.update(t => [...t, { id: Date.now(), titulo }]);  
  }  
}

HTML

<!-- Template con @for y @if -->  
@if (tareas().length > 0) {  
  <div class="lista">  
    @for (tarea of tareas(); track tarea.id) {  
      <div>{{ tarea.titulo }}</div>  
    }  
  </div>  
} @else {  
  <p>¡Añade tu primera tarea! 📝</p>  
}

Angular 19 me encanta por su sencillez. Los Signals, el nuevo control flow (@if, @for, @empty) y Models eliminan código repetitivo y hacen todo más intuitivo.

Para los que vienen de versiones antiguas:

El nuevo control flow es opcional, pero recomiendo usarlo (¡es el futuro!).

Signals integran mejor con Reactividad que los Observables en componentes simples.