Angular 18 Signals Rehberi: Reaktif Programlama Devrimi (2025)

Signal Tanımı (Signal Definition)

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

export class MyComponent {
  // Basit bir signal oluşturma (create a simple signal)
  count = signal(0);

  increment() {
    this.count.set(this.count() + 1);  // Değeri güncelle (update value)
  }
}

Template'de kullanım:

<p>Sayı: {{ count() }}</p>
<button (click)="increment()">Artır (Increment)</button>

Signals'ın Avantajları (Advantages of Signals)

• ✅ Basitlik: RxJS operatörlerini bilmeye gerek yok (no need to know RxJS operators)
• ✅ Performans: Sadece değişen kısımlar render edilir (only changed parts render)
• ✅ Type-safety: TypeScript ile mükemmel çalışır (perfect with TypeScript)
• ✅ Okunabilirlik: Kod daha temiz ve anlaşılır (cleaner and more readable code)
• ✅ Hafıza güvenliği: Subscribe/unsubscribe gerekmez (no subscribe/unsubscribe needed)

1. signal() - Writable Signal (Yazılabilir Signal)

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

export class CounterComponent {
  count = signal(0);  // Başlangıç değeri 0 (initial value 0)

  increment() {
    // Yöntem 1: set() ile direkt değer atama
    this.count.set(10);

    // Yöntem 2: update() ile mevcut değeri kullanma
    this.count.update(value => value + 1);
  }

  getCount() {
    return this.count();  // Signal'ı okuma (read signal)
  }
}

2. computed() - Computed Signal (Hesaplanan Signal)

Diğer signal'lardan türetilen, otomatik güncellenen signal (auto-updating derived signal):

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

export class ShoppingCartComponent {
  items = signal([
    { name: 'Ürün 1', price: 100, quantity: 2 },
    { name: 'Ürün 2', price: 50, quantity: 3 }
  ]);

  // Otomatik hesaplanan toplam (auto-calculated total)
  total = computed(() => {
    return this.items().reduce((sum, item) =>
      sum + (item.price * item.quantity), 0
    );
  });

  // items değişince total otomatik güncellenir! (auto-updates!)
}

Template'de:

<p>Toplam: {{ total() }} TL</p>

3. effect() - Side Effects (Yan Etkiler)

Signal değiştiğinde otomatik çalışan fonksiyon (function that runs when signal changes):

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

export class LoggerComponent {
  count = signal(0);

  constructor() {
    // count her değiştiğinde konsola yaz (log whenever count changes)
    effect(() => {
      console.log('Count değişti! Yeni değer:', this.count());
      // API çağrısı, localStorage kaydetme vb. yapabilirsiniz
    });
  }
}

Örnek kullanım senaryoları:

• LocalStorage'a otomatik kaydetme (auto-save to localStorage)
• Analytics event gönderme (send analytics events)
• Debugging ve logging

Eski Yöntem (@Input Decorator):

export class UserCardComponent {
  @Input() username: string = '';
  @Input() age: number = 0;
}

Yeni Yöntem (Signal Inputs - Angular 18):

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

@Component({
  selector: 'app-user-card',
  template: `
    <div>
      <h3>{{ username() }}</h3>
      <p>Yaş: {{ age() }}</p>
      <p>Yetişkin mi: {{ isAdult() ? 'Evet' : 'Hayır' }}</p>
    </div>
  `
})
export class UserCardComponent {
  // Signal-based inputs (read-only)
  username = input<string>('');
  age = input<number>(0);

  // Computed signal ile türetme (derive with computed)
  isAdult = computed(() => this.age() >= 18);
}

Kullanımı (parent component'te):

<app-user-card
  [username]="'Ahmet'"
  [age]="25"
/>

Örnek 1: Todo Uygulaması (Todo App)

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

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

@Component({
  selector: 'app-todo',
  template: `
    <input [(ngModel)]="newTodoText" />
    <button (click)="addTodo()">Ekle (Add)</button>

    <p>Tamamlanan: {{ completedCount() }} / {{ todos().length }}</p>

    <ul>
      @for (todo of todos(); track todo.id) {
        <li>
          <input type="checkbox"
                 [checked]="todo.completed"
                 (change)="toggleTodo(todo.id)" />
          {{ todo.text }}
        </li>
      }
    </ul>
  `
})
export class TodoComponent {
  todos = signal<Todo[]>([]);
  newTodoText = '';

  // Tamamlanan todo sayısı (completed todos count)
  completedCount = computed(() =>
    this.todos().filter(t => t.completed).length
  );

  addTodo() {
    this.todos.update(todos => [
      ...todos,
      { id: Date.now(), text: this.newTodoText, completed: false }
    ]);
    this.newTodoText = '';
  }

  toggleTodo(id: number) {
    this.todos.update(todos =>
      todos.map(t => t.id === id ? {...t, completed: !t.completed} : t)
    );
  }
}

Örnek 2: Filtrelenebilir Liste (Filterable List)

export class ProductListComponent {
  allProducts = signal([
    { id: 1, name: 'Laptop', category: 'Electronics', price: 5000 },
    { id: 2, name: 'Kitap', category: 'Books', price: 50 },
    { id: 3, name: 'Telefon', category: 'Electronics', price: 3000 }
  ]);

  searchTerm = signal('');
  selectedCategory = signal('All');

  // Otomatik filtrelenen liste (auto-filtered list)
  filteredProducts = computed(() => {
    const products = this.allProducts();
    const search = this.searchTerm().toLowerCase();
    const category = this.selectedCategory();

    return products.filter(p => {
      const matchesSearch = p.name.toLowerCase().includes(search);
      const matchesCategory = category === 'All' || p.category === category;
      return matchesSearch && matchesCategory;
    });
  });
}

Avantaj: searchTerm veya selectedCategory değiştiğinde filteredProducts otomatik güncellenir (auto-updates)!

toSignal() - Observable'dan Signal'a (Observable to Signal)

import { toSignal } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';

export class TimerComponent {
  // RxJS Observable
  timer$ = interval(1000);

  // Signal'a dönüştür (convert to signal)
  timerSignal = toSignal(this.timer$, { initialValue: 0 });

  // Template'de kullanımı çok basit (very simple in template)
  // {{ timerSignal() }} - async pipe gerekmez!
}

toObservable() - Signal'dan Observable'a (Signal to Observable)

import { toObservable } from '@angular/core/rxjs-interop';
import { debounceTime, distinctUntilChanged } from 'rxjs';

export class SearchComponent {
  searchTerm = signal('');

  // Signal'ı Observable'a çevir (convert signal to observable)
  searchTerm$ = toObservable(this.searchTerm);

  constructor() {
    // RxJS operatörlerini kullan (use RxJS operators)
    this.searchTerm$.pipe(
      debounceTime(300),
      distinctUntilChanged()
    ).subscribe(term => {
      console.log('Arama:', term);
      // API çağrısı yap (make API call)
    });
  }
}

1. Signal İsimlendirme (Signal Naming)

// ✅ İyi (Good)
const count = signal(0);
const userName = signal('');

// ❌ Kötü (Bad) - Observable gibi isimlendirme
const count$ = signal(0);  // $ sadece Observable için!

2. Immutability (Değiştirilemezlik)

// ❌ YANLIŞ (WRONG) - Array'i direkt değiştirme
this.items().push(newItem);  // Çalışmaz! (won't work!)

// ✅ DOĞRU (CORRECT) - Yeni array oluştur
this.items.update(items => [...items, newItem]);

3. Computed Signal'ları Cached (Önbellekli)

computed() sonuçları cache'lenir. Bağımlılıklar değişmezse yeniden hesaplanmaz (won't recalculate if dependencies don't change):

// Performanslı! (Performant!)
const expensiveCalculation = computed(() => {
  // Sadece items değiştiğinde çalışır (only runs when items change)
  return this.items().reduce(...);
});

4. effect() Sadece Side Effects İçin (Only for Side Effects)

// ✅ Doğru kullanım (Correct usage)
effect(() => {
  localStorage.setItem('count', this.count().toString());
});

// ❌ Yanlış - signal güncelleme yapma! (Don't update signals!)
effect(() => {
  this.anotherSignal.set(this.count() * 2);  // SONSUZ DÖNGÜ RİSKİ!
});

Adım 1: Basit State'lerden Başlayın (Start with Simple State)

Önce (Before - RxJS):

export class Component {
  private countSubject = new BehaviorSubject(0);
  count$ = this.countSubject.asObservable();

  increment() {
    this.countSubject.next(this.countSubject.value + 1);
  }
}

Sonra (After - Signals):

export class Component {
  count = signal(0);

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

Adım 2: Template'leri Güncelleyin (Update Templates)

Önce:

<p>{{ count$ | async }}</p>

Sonra:

<p>{{ count() }}</p>

Adım 3: HTTP Çağrıları için toSignal() Kullanın

export class UserComponent {
  private http = inject(HttpClient);

  // HTTP çağrısı (RxJS kalır / RxJS stays)
  user$ = this.http.get('/api/user');

  // Signal'a çevir (convert to signal)
  user = toSignal(this.user$);

  // Template'de: {{ user()?.name }}
}