DEV Community

Miguel Lopez
Miguel Lopez

Posted on

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); } }
Enter fullscreen mode Exit fullscreen mode

¿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> }
Enter fullscreen mode Exit fullscreen mode

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> }
Enter fullscreen mode Exit fullscreen mode

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 ❌' }); }
Enter fullscreen mode Exit fullscreen mode

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

Inyectar servicios sin constructor

import { inject } from '@angular/core'; class PerfilComponent { servicioAuth = inject(AuthService); // ¡Magic! }
Enter fullscreen mode Exit fullscreen mode

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

effect(() => { localStorage.setItem('tema', tema()); });
Enter fullscreen mode Exit fullscreen mode

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 }]); } }
Enter fullscreen mode Exit fullscreen mode

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> }
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)