Angular Signals nedir?

Question

Accepted Answer

**Signals** durum yönetimi için Angular'ın reaktif primitifidir (Angular 16+ ile eklendi) — bir değerin etrafına sarılı bir wrapper ve **değiştiğinde tüketicileri bilgilendirir**, Zone.js değişiklik algılamasına bağlı kalmadan ince taneli, verimli güncellemeleri sağlar. ## Signal oluşturma ve kullanma ```ts import { signal, computed, effect } from "@angular/core"; export class CounterComponent { count = signal(0); // a writable signal double = computed(() => this.count() * 2); // derived signal (auto-updates) increment() { this.count.set(this.count() + 1); // set a new value this.count.update(c => c + 1); // or update based on current } constructor() { effect(() => { console.log(`count is now ${this.count()}`); // re-runs when count changes }); } } ``` ## Signal okuma: fonksiyon olarak çağırın ```html ``` Signals **çağırarak okunur** (`count()`), düz özellikler değil. Şablonda, Angular bir view'in hangi signal'ları okuduğunu tam olarak izler, bu nedenle bir signal değiştiğinde yalnızca etkilenen kısımlar güncellenir. ## Üç signal türü ```text signal(value) → writable state, updated via .set() / .update() computed(() => ...) → derived/cached value; auto-recomputes when its deps change effect(() => ...) → runs a side effect whenever read signals change ``` `computed` tembel ve önbelleğe alınmıştır (Vue'nin computed gibi); `effect` yan etkileri reaktif olarak çalıştırır (watcher gibi). ## Neden önemli: ince taneli reaktivite ```text Traditional Angular: a change triggers checking the WHOLE component tree (Zone.js) Signals: Angular knows EXACTLY which views depend on a changed signal → update only those → far more efficient, and enables "zoneless" Angular ``` Signals, Angular'a **kesin bağımlılık izlemesi** verir — bir signal değiştiğinde, onu gerçekten okuyan yalnızca view'lar ve computed'lar güncellenir. Bu, Zone.js'in tetiklediği geniş değişiklik algılamasından daha verimlidir ve Zone.js'i tamamen kaldırmanın temelini oluşturur (zoneless modu). ## Signal tabanlı input'lar (daha yeni) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Neden önemli Signals, Angular'ın reaktivitesindeki en önemli son evrim — örtülü Zone.js değişiklik algılamasından daha basit, daha açık ve çok daha verimli bir model. İnce taneli güncellemeleri sağlar, gereksiz denetimleri azaltır, computed/effect'le temiz bir şekilde entegre olur ve bölgesi olmayan Angular'a giden yolu açar. Signals'ı anlamak giderek daha önemli hale geldi çünkü Angular yeni geliştirmeyi bunları varsayılan durum primitifi olarak kullanma yönünde yöneltmektedir.