Signals mélyen — signal, computed, effect, és a reactive graph

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

// Create — the signal() factory returns a WritableSignal
const count = signal(0);

// Read — call it as a function
console.log(count());  // 0

// Write — set a new value
count.set(5);

// Write — based on the previous value
count.update(c => c + 1);  // 6

// Object signal — update with a fresh reference
const user = signal({ name: 'Zsaga', age: 45 });
user.update(u => ({ ...u, age: u.age + 1 }));

const items = signal([1, 2, 3]);

// DOES NOT NOTIFY — same reference
items.update(arr => {
  arr.push(4);
  return arr;
});

// NOTIFIES — new array
items.update(arr => [...arr, 4]);

const position = signal({ x: 0, y: 0 }, {
  equal: (a, b) => a.x === b.x && a.y === b.y
});

// New object, same content — does not notify
position.set({ x: 0, y: 0 });  // no-op
position.set({ x: 1, y: 0 });  // notifies

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

const firstName = signal('Zsaga');
const lastName  = signal('Soft');

const fullName = computed(() => `${firstName()} ${lastName()}`);

console.log(fullName());  // 'Zsaga Soft'

lastName.set('Studio');
console.log(fullName());  // 'Zsaga Studio'

const isPremium = signal(false);
const basePrice = signal(100);
const premiumDiscount = signal(20);

const finalPrice = computed(() => {
  if (!isPremium()) {
    return basePrice();
    // premiumDiscount NOT READ — the computed doesn't track its changes
  }
  return basePrice() - premiumDiscount();
});

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

@Component({ /* ... */ })
export class SettingsComponent {
  readonly theme = signal<'light' | 'dark'>('light');

  constructor() {
    // localStorage sync — runs on every theme change
    effect(() => {
      localStorage.setItem('theme', this.theme());
    });
  }
}

effect((onCleanup) => {
  const id = this.selectedId();
  const ws = new WebSocket(`wss://api/stream/${id}`);

  ws.addEventListener('message', handleMessage);

  onCleanup(() => ws.close());
});

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

const user    = signal({ id: 'u1', name: 'Zsaga' });
const message = signal('hello');

effect(() => {
  const msg = message();        // registers: message → effect
  const u   = untracked(() => user());  // NOT registered

  console.log(`${u.name}: ${msg}`);
});

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

const products = signal([
  { id: 'p1', name: 'Apple' },
  { id: 'p2', name: 'Banana' }
]);

// linkedSignal: defaults to the first product, but can be set manually
const selected = linkedSignal(() => products()[0]);

selected.set(products()[1]);        // Banana

// products updates — selected falls back to the linked computation
products.set([{ id: 'p3', name: 'Cherry' }]);
selected();  // Cherry — the first item of the new list

const firstName = signal('Zsaga');
const lastName  = signal('Soft');

const fullName = computed(() => `${firstName()} ${lastName()}`);
const initials = computed(() => firstName()[0] + lastName()[0]);

effect(() => console.log(fullName(), initials()));

firstName.set('Zoli');
lastName.set('Kovacs');

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

interface Product {
  id: string;
  name: string;
  category: string;
  price: number;
}

@Component({
  selector: 'app-product-filter',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <select [value]="category()" (change)="onCategoryChange($event)">
      <option value="all">All</option>
      <option value="fruit">Fruit</option>
    </select>

    <input type="number" [value]="maxPrice()"
           (input)="onMaxPriceChange($event)" />

    <p>Results: {{ resultCount() }}</p>

    @for (p of filtered(); track p.id) {
      <div>{{ p.name }} — {{ p.price }} USD</div>
    }
  `
})
export class ProductFilterComponent {
  readonly products = signal<Product[]>([]);
  readonly category = signal('all');
  readonly maxPrice = signal(1000);

  readonly filtered = computed(() => {
    const cat = this.category();
    const max = this.maxPrice();
    return this.products().filter(p =>
      (cat === 'all' || p.category === cat) && p.price <= max
    );
  });

  readonly resultCount = computed(() => this.filtered().length);

  constructor() {
    // Analytics effect — only reacts to filter changes
    effect(() => {
      const cat = this.category();
      const max = this.maxPrice();
      analytics.track('filter-changed', { cat, max });
    });
  }

  onCategoryChange(e: Event) {
    this.category.set((e.target as HTMLSelectElement).value);
  }

  onMaxPriceChange(e: Event) {
    this.maxPrice.set(+(e.target as HTMLInputElement).value);
  }
}