Angular Signals Reactivity

# Angular Signals Reactivity

You are an expert in Angular Signals for fine-grained reactivity, replacing RxJS for component state management.

## Key Principles
- Use signal() for reactive state
- Use computed() for derived values
- Use effect() for side effects
- Convert from RxJS observables when needed
- Combine with OnPush for optimal performance

## Signal Fundamentals
```typescript
import { Component, signal, computed, effect, untracked } from "@angular/core";

@Component({
  selector: "app-counter",
  standalone: true,
  template: `
    <div class="counter">
      <h2>Count: {{ count() }}</h2>
      <p>Doubled: {{ doubled() }}</p>
      <p>Is even: {{ isEven() ? "Yes" : "No" }}</p>
      
      <button (click)="decrement()">-</button>
      <button (click)="increment()">+</button>
      <button (click)="reset()">Reset</button>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
  // Writable signal
  count = signal(0);
  
  // Computed signals (read-only, auto-tracking)
  doubled = computed(() => this.count() * 2);
  isEven = computed(() => this.count() % 2 === 0);
  
  // Effect runs when dependencies change
  constructor() {
    effect(() => {
      console.log(`Count changed to: ${this.count()}`);
      
      // Use untracked to read without creating dependency
      const doubled = untracked(() => this.doubled());
      console.log(`Doubled (untracked): ${doubled}`);
    });
  }
  
  increment() {
    // Update methods
    this.count.update(c => c + 1);
  }
  
  decrement() {
    this.count.update(c => c - 1);
  }
  
  reset() {
    this.count.set(0);
  }
}
```

## Complex State with Signals
```typescript
interface User {
  id: string;
  name: string;
  email: string;
  preferences: {
    theme: "light" | "dark";
    notifications: boolean;
  };
}

@Component({...})
export class UserSettingsComponent {
  // Object signal
  user = signal<User>({
    id: "1",
    name: "John Doe",
    email: "john@example.com",
    preferences: {
      theme: "light",
      notifications: true
    }
  });
  
  // Computed from nested property
  theme = computed(() => this.user().preferences.theme);
  
  // Array signal
  notifications = signal<Notification[]>([]);
  
  // Computed with filtering
  unreadNotifications = computed(() => 
    this.notifications().filter(n => !n.read)
  );
  
  unreadCount = computed(() => this.unreadNotifications().length);
  
  // Update nested property immutably
  toggleTheme() {
    this.user.update(user => ({
      ...user,
      preferences: {
        ...user.preferences,
        theme: user.preferences.theme === "light" ? "dark" : "light"
      }
    }));
  }
  
  // Update array
  addNotification(notification: Notification) {
    this.notifications.update(list => [...list, notification]);
  }
  
  markAsRead(id: string) {
    this.notifications.update(list =>
      list.map(n => n.id === id ? { ...n, read: true } : n)
    );
  }
  
  clearAll() {
    this.notifications.set([]);
  }
}
```

## RxJS Interoperability
```typescript
import { toSignal, toObservable } from "@angular/core/rxjs-interop";
import { HttpClient } from "@angular/common/http";
import { switchMap, debounceTime, distinctUntilChanged } from "rxjs/operators";

@Component({...})
export class SearchComponent {
  private http = inject(HttpClient);
  
  // Signal for search query
  searchQuery = signal("");
  
  // Convert signal to observable for RxJS operators
  private searchQuery$ = toObservable(this.searchQuery);
  
  // Use RxJS for complex async operations
  private searchResults$ = this.searchQuery$.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(query => 
      query.length > 2 
        ? this.http.get<Result[]>(`/api/search?q=${query}`)
        : of([])
    )
  );
  
  // Convert back to signal for template
  searchResults = toSignal(this.searchResults$, { initialValue: [] });
  
  // Loading state with manual signal
  isLoading = signal(false);
  
  // Async data fetching
  private users$ = this.http.get<User[]>("/api/users");
  users = toSignal(this.users$);
  
  // Handle loading/error states
  private data$ = this.http.get<Data>("/api/data");
  data = toSignal(this.data$, { 
    initialValue: null,
    rejectErrors: true 
  });
}
```

## Effects with Cleanup
```typescript
@Component({...})
export class LiveDataComponent implements OnDestroy {
  data = signal<DataPoint[]>([]);
  isConnected = signal(false);
  
  private destroyRef = inject(DestroyRef);
  
  constructor() {
    // Effect with cleanup
    effect((onCleanup) => {
      const ws = new WebSocket("wss://api.example.com/live");
      
      ws.onopen = () => this.isConnected.set(true);
      ws.onclose = () => this.isConnected.set(false);
      
      ws.onmessage = (event) => {
        const point = JSON.parse(event.data);
        this.data.update(d => [...d.slice(-99), point]);
      };
      
      // Cleanup function
      onCleanup(() => {
        ws.close();
      });
    });
    
    // Effect with DestroyRef for manual cleanup
    effect(() => {
      const interval = setInterval(() => {
        console.log("Current count:", this.data().length);
      }, 5000);
      
      this.destroyRef.onDestroy(() => {
        clearInterval(interval);
      });
    });
  }
}
```

## Signal-Based Forms
```typescript
@Component({
  template: `
    <form (ngSubmit)="onSubmit()">
      <input 
        [value]="form().name" 
        (input)="updateField($event, 'name')" 
      />
      <input 
        [value]="form().email" 
        (input)="updateField($event, 'email')" 
        type="email"
      />
      
      @if (errors().name) {
        <span class="error">{{ errors().name }}</span>
      }
      
      <button [disabled]="!isValid()">Submit</button>
    </form>
  `
})
export class SignalFormComponent {
  form = signal({
    name: "",
    email: ""
  });
  
  errors = computed(() => {
    const f = this.form();
    return {
      name: f.name.length < 2 ? "Name too short" : null,
      email: !f.email.includes("@") ? "Invalid email" : null
    };
  });
  
  isValid = computed(() => {
    const e = this.errors();
    return !e.name && !e.email;
  });
  
  updateField(event: Event, field: keyof typeof this.form) {
    const value = (event.target as HTMLInputElement).value;
    this.form.update(f => ({ ...f, [field]: value }));
  }
  
  onSubmit() {
    if (this.isValid()) {
      console.log("Submitting:", this.form());
    }
  }
}
```

## Best Practices
- Prefer signals over BehaviorSubject for component state
- Use computed() for any derived data
- Keep effects minimal and focused on side effects
- Use toSignal/toObservable for RxJS integration
- Combine with OnPush change detection
- Use untracked() to avoid unwanted dependencies