🚀 Angular: Observables vs Signals

// Exemplu de bază Observable
import { Observable, of, interval } from 'rxjs';
import { map, filter, debounceTime, take } from 'rxjs/operators';

// Observable simplu
const myObservable = new Observable<string>(observer => {
  observer.next('Prima valoare');
  observer.next('A doua valoare');
  
  setTimeout(() => {
    observer.next('Valoare întârziată');
    observer.complete();
  }, 1000);
});

// Subscribing
myObservable.subscribe({
  next: (value: string) => console.log(value),
  complete: () => console.log('Completat!')
});

// Observable cu operatori
const numbers$ = interval(1000).pipe(
  filter(n => n % 2 === 0),
  map(n => n * 2),
  take(5)
);

// Emite: 0, 4, 8, 12, 16

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

// Signal simplu
const count = signal(0);

// Citire valoare
console.log(count()); // 0

// Actualizare valoare
count.set(5);
count.update(value => value + 1);

// Computed signal
const doubleCount = computed(() => count() * 2);

// Effect - se execută automat când se schimbă dependențele
effect(() => {
  console.log(`Count este: ${count()}`);
});

// În component
@Component({
  template: `
    <div>Count: {{ count() }}</div>
    <div>Double: {{ doubleCount() }}</div>
    <button (click)="increment()">+</button>
  `
})
export class CounterComponent {
  count = signal(0);
  doubleCount = computed(() => this.count() * 2);
  
  increment(): void {
    this.count.update(v => v + 1);
  }
}

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

@Injectable({ providedIn: 'root' })
export class CartService {
  // State cu Signals
  private itemsSignal = signal<CartItem[]>([]);
  
  // Public API
  items = this.itemsSignal.asReadonly();
  
  // Computed values
  totalItems = computed(() => 
    this.itemsSignal().reduce((sum, item) => sum + item.quantity, 0)
  );
  
  totalPrice = computed(() => 
    this.itemsSignal().reduce((sum, item) => 
      sum + (item.price * item.quantity), 0
    )
  );
  
  isEmpty = computed(() => this.itemsSignal().length === 0);
  
  // Methods
  addItem(product: Product): void {
    this.itemsSignal.update(items => {
      const existing = items.find(i => i.id === product.id);
      if (existing) {
        return items.map(i => 
          i.id === product.id 
            ? { ...i, quantity: i.quantity + 1 }
            : i
        );
      }
      return [...items, { ...product, quantity: 1 }];
    });
  }
}

@Component({
  template: `
    <input [formControl]="searchControl" placeholder="Search...">
    <div *ngFor="let user of users$ | async">{{ user.name }}</div>
  `
})
export class SearchComponent implements OnInit {
  searchControl = new FormControl('');
  users$ = new BehaviorSubject<User[]>([]);
  
  ngOnInit(): void {
    this.searchControl.valueChanges.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      filter(term => term !== null && term.length > 2),
      switchMap(term => this.searchUsers(term!)),
      takeUntilDestroyed()
    ).subscribe(users => this.users$.next(users));
  }
  
  private searchUsers(term: string): Observable<User[]> {
    return this.http.get<User[]>(`/api/users/search?q=${term}`);
  }
}