{"id":35556,"date":"2025-12-01T03:40:42","date_gmt":"2025-12-01T00:40:42","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=35556"},"modified":"2025-12-01T03:40:42","modified_gmt":"2025-12-01T00:40:42","slug":"angularda-degisiklik-algilama-stratejilerini-kullanmak-detayli-bir-kilavuz","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angularda-degisiklik-algilama-stratejilerini-kullanmak-detayli-bir-kilavuz\/","title":{"rendered":"Angular’da De\u011fi\u015fiklik Alg\u0131lama Stratejilerini Kullanmak: Detayl\u0131 Bir K\u0131lavuz"},"content":{"rendered":"

<\/p>\n

Angular’da De\u011fi\u015fiklik Alg\u0131lama Stratejilerini Kullanmak: Detayl\u0131 Bir K\u0131lavuz<\/h2>\n

Giri\u015f: Angular’da De\u011fi\u015fiklik Alg\u0131lama Nedir?<\/h3>\n

Angular, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc ve pop\u00fcler bir \u00e7er\u00e7evedir. Bu \u00e7er\u00e7evenin temelinde yatan en \u00f6nemli mekanizmalardan biri, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc (UI) uygulaman\u0131n veri modeliyle senkronize tutan “De\u011fi\u015fiklik Alg\u0131lama” (Change Detection) sistemidir. Bir Angular uygulamas\u0131nda, verilerde yap\u0131lan herhangi bir de\u011fi\u015fiklik (\u00f6rne\u011fin, bir API \u00e7a\u011fr\u0131s\u0131ndan gelen yeni veriler, bir kullan\u0131c\u0131n\u0131n form alan\u0131na giri\u015f yapmas\u0131 veya bir zamanlay\u0131c\u0131n\u0131n tetiklenmesi) UI’\u0131n g\u00fcncellenmesini gerektirir. De\u011fi\u015fiklik Alg\u0131lama, bu g\u00fcncellemelerin ne zaman ve nas\u0131l yap\u0131laca\u011f\u0131n\u0131 belirleyen bir s\u00fcre\u00e7tir.<\/p>\n

Angular’\u0131n de\u011fi\u015fiklik alg\u0131lama mekanizmas\u0131, uygulaman\u0131z\u0131n performans\u0131n\u0131 do\u011frudan etkileyen kritik bir bile\u015fendir. Yanl\u0131\u015f yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131nda veya anla\u015f\u0131lmad\u0131\u011f\u0131nda, gereksiz UI g\u00fcncellemelerine yol a\u00e7arak uygulaman\u0131z\u0131n yava\u015flamas\u0131na neden olabilir. Ancak do\u011fru kullan\u0131ld\u0131\u011f\u0131nda, uygulaman\u0131z\u0131n h\u0131zl\u0131, duyarl\u0131 ve verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bu makalede, Angular’\u0131n de\u011fi\u015fiklik alg\u0131lama sisteminin derinliklerine inecek, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, farkl\u0131 stratejilerini ve bu stratejileri uygulaman\u0131zda nas\u0131l etkin bir \u015fekilde kullanabilece\u011finizi detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Angular’\u0131n De\u011fi\u015fiklik Alg\u0131lama Mekanizmas\u0131 Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n

Angular’\u0131n de\u011fi\u015fiklik alg\u0131lama sistemi, temelde iki ana bile\u015fen \u00fczerine kuruludur: Zone.js ve bile\u015fen a\u011fac\u0131. Bu iki bile\u015fen, uygulaman\u0131zdaki veri de\u011fi\u015fikliklerini tespit etmek ve UI’\u0131 buna g\u00f6re g\u00fcncellemek i\u00e7in birlikte \u00e7al\u0131\u015f\u0131r.<\/p>\n

Zone.js ve Asenkron \u0130\u015flemler<\/h4>\n

Angular’\u0131n de\u011fi\u015fiklik alg\u0131lama sisteminin kalbinde Zone.js adl\u0131 bir k\u00fct\u00fcphane bulunur. Zone.js, taray\u0131c\u0131n\u0131n asenkron API’lerini (\u00f6rne\u011fin, setTimeout<\/code>, setInterval<\/code>, XMLHttpRequest<\/code>, event listener’lar, Promise’ler) “yamalar” (patches). Bu yama i\u015flemi sayesinde, bir asenkron i\u015flemin ne zaman ba\u015flad\u0131\u011f\u0131n\u0131 ve ne zaman bitti\u011fini takip edebilir.<\/p>\n

Bir asenkron i\u015flem tamamland\u0131\u011f\u0131nda (\u00f6rne\u011fin, bir HTTP iste\u011fi ba\u015far\u0131yla sonu\u00e7land\u0131\u011f\u0131nda veya bir butona t\u0131kland\u0131\u011f\u0131nda), Zone.js Angular’\u0131 bilgilendirir. Angular, bu bildirimi bir “olas\u0131 de\u011fi\u015fiklik” sinyali olarak alg\u0131lar ve uygulaman\u0131n de\u011fi\u015fiklik alg\u0131lama d\u00f6ng\u00fcs\u00fcn\u00fc tetikler. Bu sayede, geli\u015ftiricilerin her veri de\u011fi\u015fikli\u011finde manuel olarak UI g\u00fcncellemesi yapmas\u0131na gerek kalmaz; Angular bunu otomatik olarak halleder.<\/p>\n

Bazen, Angular’\u0131n de\u011fi\u015fiklik alg\u0131lama d\u00f6ng\u00fcs\u00fcn\u00fc tetiklememesini istedi\u011fimiz durumlar olabilir. \u00d6zellikle y\u00fcksek frekansl\u0131 veya UI ile do\u011frudan ilgili olmayan asenkron i\u015flemler i\u00e7in bu durum ge\u00e7erlidir. Bu senaryolarda, NgZone<\/code> servisini kullanarak belirli kod bloklar\u0131n\u0131 Angular’\u0131n Zone’u d\u0131\u015f\u0131nda \u00e7al\u0131\u015ft\u0131rabiliriz. NgZone.runOutsideAngular()<\/code> metodu, bu t\u00fcr i\u015flemleri Angular’\u0131n de\u011fi\u015fiklik alg\u0131lama mekanizmas\u0131n\u0131 tetiklemeden ger\u00e7ekle\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n

De\u011fi\u015fiklik Alg\u0131lama A\u011fac\u0131 (Change Detection Tree)<\/h4>\n

Bir Angular uygulamas\u0131, bile\u015fenlerden olu\u015fan bir a\u011fa\u00e7 yap\u0131s\u0131na sahiptir. En \u00fcstte genellikle AppComponent<\/code> bulunur ve di\u011fer t\u00fcm bile\u015fenler bu ana bile\u015fenin alt\u0131ndaki dallar olarak konumlan\u0131r. Angular’\u0131n de\u011fi\u015fiklik alg\u0131lama s\u00fcreci, bu bile\u015fen a\u011fac\u0131 \u00fczerinde yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru ilerler.<\/p>\n

Bir de\u011fi\u015fiklik alg\u0131lama d\u00f6ng\u00fcs\u00fc tetiklendi\u011finde, Angular a\u011fac\u0131n en \u00fcst\u00fcndeki bile\u015fenden ba\u015flayarak her bir bile\u015fenin \u015fablonunda kullan\u0131lan verilerin de\u011fi\u015fip de\u011fi\u015fmedi\u011fini kontrol eder. Bu kontrol i\u015flemi, bile\u015fenlerin @Input()<\/code> \u00f6zellikleri, \u015fablon ifadeleri ve bile\u015fenin i\u00e7indeki herhangi bir veri ba\u011flama i\u00e7in yap\u0131l\u0131r. E\u011fer bir bile\u015fenin verileri de\u011fi\u015fmi\u015fse, Angular o bile\u015fenin \u015fablonunu yeniden render eder ve ard\u0131ndan alt bile\u015fenlerine ge\u00e7er. Bu tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131, de\u011fi\u015fikliklerin \u00f6ng\u00f6r\u00fclebilir bir \u015fekilde yay\u0131lmas\u0131n\u0131 sa\u011flar ve d\u00f6ng\u00fcsel ba\u011f\u0131ml\u0131l\u0131klar\u0131 \u00f6nler.<\/p>\n

De\u011fi\u015fiklik Alg\u0131lama D\u00f6ng\u00fcs\u00fc<\/h4>\n

Bir de\u011fi\u015fiklik alg\u0131lama d\u00f6ng\u00fcs\u00fc, a\u015fa\u011f\u0131daki olaylardan herhangi biri taraf\u0131ndan tetiklenebilir:
\n* Asenkron Taray\u0131c\u0131 Olaylar\u0131:<\/strong> setTimeout()<\/code>, setInterval()<\/code>, Promise.then()<\/code>, XMLHttpRequest<\/code> (HTTP istekleri), DOM olaylar\u0131 (click, keyup vb.).
\n* Veri De\u011fi\u015fiklikleri:<\/strong> @Input()<\/code> \u00f6zellikleri arac\u0131l\u0131\u011f\u0131yla bir \u00fcst bile\u015fenden alt bile\u015fene gelen verilerin de\u011fi\u015fmesi.
\n* Manuel Tetiklemeler:<\/strong> ChangeDetectorRef<\/code> servisi arac\u0131l\u0131\u011f\u0131yla yap\u0131lan manuel tetiklemeler (ileride detayland\u0131r\u0131lacakt\u0131r).<\/p>\n

Bir d\u00f6ng\u00fc tetiklendi\u011finde, Angular t\u00fcm bile\u015fen a\u011fac\u0131n\u0131 yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru kontrol eder. Bu kontrol s\u0131ras\u0131nda, Angular her bile\u015fenin mevcut durumunu bir \u00f6nceki durumuyla kar\u015f\u0131la\u015ft\u0131r\u0131r. E\u011fer bir fark bulunursa, bile\u015fenin g\u00f6r\u00fcn\u00fcm\u00fc g\u00fcncellenir. Bu i\u015flem, uygulaman\u0131n veri modelinin UI ile her zaman senkronize kalmas\u0131n\u0131 sa\u011flar.<\/p>\n

De\u011fi\u015fiklik Alg\u0131lama Stratejileri: Default vs. OnPush<\/h3>\n

Angular, bile\u015fenlerinizin de\u011fi\u015fiklikleri nas\u0131l alg\u0131layaca\u011f\u0131n\u0131 kontrol etmek i\u00e7in iki ana strateji sunar: Default<\/code> ve OnPush<\/code>. Bu stratejiler, bile\u015fen baz\u0131nda belirlenebilir ve uygulaman\u0131z\u0131n performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde etkileyebilir.<\/p>\n

Default Strateji (ChangeDetectionStrategy.Default)<\/h4>\n

Bu, Angular bile\u015fenleri i\u00e7in varsay\u0131lan de\u011fi\u015fiklik alg\u0131lama stratejisidir. Bir bile\u015fen i\u00e7in a\u00e7\u0131k\u00e7a bir strateji belirtmedi\u011finizde, Angular otomatik olarak Default<\/code> stratejisini kullan\u0131r.<\/p>\n

* Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/strong> Default<\/code> stratejisi, uygulaman\u0131n Zone’u i\u00e7inde herhangi bir asenkron olay (HTTP iste\u011fi, DOM olay\u0131, zamanlay\u0131c\u0131 vb.) meydana geldi\u011finde veya bir @Input()<\/code> de\u011feri de\u011fi\u015fti\u011finde, Angular’\u0131n t\u00fcm bile\u015fen a\u011fac\u0131n\u0131 yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru kontrol etmesini sa\u011flar. Bu, her de\u011fi\u015fiklik alg\u0131lama d\u00f6ng\u00fcs\u00fcnde, k\u00f6k bile\u015fenden ba\u015flayarak t\u00fcm alt bile\u015fenlerin (stratejileri ne olursa olsun) verilerinin de\u011fi\u015fip de\u011fi\u015fmedi\u011fini kontrol edildi\u011fi anlam\u0131na gelir.<\/p>\n

* Avantajlar\u0131:<\/strong>
\n * Basitlik:<\/strong> Geli\u015ftiricinin de\u011fi\u015fiklik alg\u0131lama hakk\u0131nda fazla d\u00fc\u015f\u00fcnmesine gerek kalmaz. Herhangi bir veri de\u011fi\u015fikli\u011fi oldu\u011funda UI’\u0131n g\u00fcncellenece\u011fi garanti edilir.
\n * G\u00fcvenilirlik:<\/strong> Mutasyona u\u011fram\u0131\u015f (de\u011fi\u015ftirilebilir) verilerle \u00e7al\u0131\u015f\u0131rken bile her zaman do\u011fru sonu\u00e7 verir.<\/p>\n

* Dezavantajlar\u0131:<\/strong>
\n * Performans Y\u00fck\u00fc:<\/strong> \u00d6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, her d\u00f6ng\u00fcde t\u00fcm bile\u015fen a\u011fac\u0131n\u0131 kontrol etmek gereksiz yere zaman alabilir. Bu, uygulaman\u0131n yava\u015flamas\u0131na ve kullan\u0131c\u0131 deneyiminin d\u00fc\u015fmesine neden olabilir. Bir bile\u015fenin verileri de\u011fi\u015fmese bile, Angular onu kontrol edecektir.<\/p>\n

* Ne Zaman Kullan\u0131l\u0131r?<\/strong> K\u00fc\u00e7\u00fck uygulamalar veya h\u0131zl\u0131 prototipler i\u00e7in yeterli olabilir. Ancak performans kritik uygulamalarda genellikle OnPush<\/code> stratejisi tercih edilir.<\/p>\n

OnPush Stratejisi (ChangeDetectionStrategy.OnPush)<\/h4>\n

OnPush<\/code> stratejisi, Angular’\u0131n de\u011fi\u015fiklik alg\u0131lama mekanizmas\u0131 \u00fczerinde daha fazla kontrol sa\u011flayarak performans\u0131 art\u0131rmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu strateji, bile\u015fenin ve alt bile\u015fenlerinin yaln\u0131zca belirli ko\u015fullar alt\u0131nda kontrol edilmesini sa\u011flar.<\/p>\n

Bir bile\u015fen OnPush<\/code> stratejisi ile yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131nda, Angular o bile\u015feni (ve dolay\u0131s\u0131yla alt bile\u015fenlerini) yaln\u0131zca a\u015fa\u011f\u0131daki durumlarda kontrol eder:<\/p>\n

1. Giri\u015f Referanslar\u0131 De\u011fi\u015fti\u011finde:<\/strong> Bile\u015fenin @Input()<\/code> \u00f6zellikleri arac\u0131l\u0131\u011f\u0131yla gelen verilerin referans\u0131 de\u011fi\u015fti\u011finde. Bu, \u00f6zellikle immutable (de\u011fi\u015fmez) veri yap\u0131lar\u0131 kullan\u0131ld\u0131\u011f\u0131nda \u00e7ok etkilidir. E\u011fer bir nesnenin veya dizinin i\u00e7eri\u011fi de\u011fi\u015fir ancak referans\u0131 ayn\u0131 kal\u0131rsa, OnPush<\/code> bile\u015feni otomatik olarak kontrol etmez.
\n2. Bile\u015fenin Kendisinden veya Alt Bile\u015fenlerinden Bir Olay Tetiklendi\u011finde:<\/strong> Bile\u015fenin kendi \u015fablonunda veya alt bile\u015fenlerinin \u015fablonunda bir DOM olay\u0131 (\u00f6rne\u011fin, bir buton t\u0131klamas\u0131, form giri\u015fi) meydana geldi\u011finde.
\n3. async<\/code> Pipe Kullan\u0131ld\u0131\u011f\u0131nda:<\/strong> Bile\u015fenin \u015fablonunda bir Observable<\/code> veya Promise<\/code> ile async<\/code> pipe kullan\u0131ld\u0131\u011f\u0131nda ve bu Observable<\/code> yeni bir de\u011fer yayd\u0131\u011f\u0131nda. async<\/code> pipe, Angular’a otomatik olarak bile\u015feni kontrol etmesi gerekti\u011fini bildirir.
\n4. Manuel Olarak Tetiklendi\u011finde:<\/strong> ChangeDetectorRef<\/code> servisi kullan\u0131larak markForCheck()<\/code> veya detectChanges()<\/code> metotlar\u0131 \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda.<\/p>\n

* Avantajlar\u0131:<\/strong>
\n * \u00d6nemli Performans Kazanc\u0131:<\/strong> Gereksiz de\u011fi\u015fiklik alg\u0131lama d\u00f6ng\u00fclerini ve kontrollerini ortadan kald\u0131r\u0131r. Yaln\u0131zca ger\u00e7ekten de\u011fi\u015fmesi gereken bile\u015fenler kontrol edilir.
\n * Daha \u00d6ng\u00f6r\u00fclebilir Davran\u0131\u015f:<\/strong> Bile\u015fenlerin ne zaman g\u00fcncellenece\u011fi daha net hale gelir.
\n * Immutable Veri Kullan\u0131m\u0131n\u0131 Te\u015fvik Eder:<\/strong> Performans avantajlar\u0131ndan tam olarak yararlanmak i\u00e7in immutable veri yap\u0131lar\u0131 kullanmaya te\u015fvik eder, bu da uygulaman\u0131n daha kararl\u0131 ve hatas\u0131z olmas\u0131na yard\u0131mc\u0131 olur.<\/p>\n

* Dezavantajlar\u0131:<\/strong>
\n * Daha Fazla Dikkat Gerektirir:<\/strong> Mutasyona u\u011fram\u0131\u015f verilerle \u00e7al\u0131\u015f\u0131rken dikkatli olunmal\u0131d\u0131r. E\u011fer bir nesnenin i\u00e7ini de\u011fi\u015ftirir ama referans\u0131n\u0131 de\u011fi\u015ftirmezseniz, OnPush<\/code> bile\u015feniniz g\u00fcncellenmeyebilir.
\n * \u00d6\u011frenme E\u011frisi:<\/strong> \u00d6zellikle yeni ba\u015flayanlar i\u00e7in OnPush<\/code> stratejisi ve ChangeDetectorRef<\/code> kullan\u0131m\u0131 ba\u015flang\u0131\u00e7ta biraz karma\u015f\u0131k gelebilir.<\/p>\n

* Ne Zaman Kullan\u0131l\u0131r?<\/strong> B\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, performans\u0131n kritik oldu\u011fu durumlarda ve m\u00fcmk\u00fcnse her bile\u015fende OnPush<\/code> stratejisinin kullan\u0131lmas\u0131 \u015fiddetle tavsiye edilir. Genellikle, bile\u015fenlerin \u00e7o\u011fu stateless (durumsuz) veya dumb (aptal) bile\u015fenler oldu\u011fundan, OnPush<\/code> onlar i\u00e7in m\u00fckemmel bir se\u00e7imdir.<\/p>\n

OnPush Stratejisi ile \u00c7al\u0131\u015fmak: Detaylar ve En \u0130yi Uygulamalar<\/h3>\n

OnPush<\/code> stratejisi, Angular uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 optimize etmek i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Ancak, do\u011fru bir \u015fekilde kullan\u0131lmad\u0131\u011f\u0131nda beklenmedik davran\u0131\u015flara yol a\u00e7abilir. \u0130\u015fte OnPush<\/code> ile \u00e7al\u0131\u015f\u0131rken dikkat etmeniz gereken detaylar ve en iyi uygulamalar:<\/p>\n

Immutable Veri Yap\u0131lar\u0131<\/h4>\n

OnPush<\/code> stratejisinin en temel gereksinimlerinden biri, @Input()<\/code> \u00f6zellikleri arac\u0131l\u0131\u011f\u0131yla bile\u015fenlere iletilen verilerin immutable (de\u011fi\u015fmez) olmas\u0131d\u0131r. Angular, OnPush<\/code> bile\u015fenini yaln\u0131zca @Input()<\/code> referans\u0131 de\u011fi\u015fti\u011finde kontrol eder.<\/p>\n

* Mutable (De\u011fi\u015febilir) Veri \u00d6rne\u011fi:<\/strong><\/p>\n

\/\/ Parent Component\n    data = { value: 'initial' };\n    changeData() {\n      this.data.value = 'updated'; \/\/ Referans de\u011fi\u015fmiyor, sadece i\u00e7erik\n    }\n\n    \/\/ Child Component (OnPush)\n    @Input() data: { value: string };<\/code><\/pre>\n
    Yukar\u0131daki senaryoda, changeData()<\/code> \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda data<\/code> nesnesinin referans\u0131 de\u011fi\u015fmedi\u011fi i\u00e7in ChildComponent<\/code> otomatik olarak g\u00fcncellenmeyecektir.<\/p>\n
*   Immutable (De\u011fi\u015fmez) Veri \u00d6rne\u011fi:<\/strong><\/p>\n
\/\/ Parent Component\n    data = { value: 'initial' };\n    changeDataImmutable() {\n      this.data = { ...this.data, value: 'updated' }; \/\/ Yeni bir referans olu\u015fturuluyor\n    }\n    \/\/ Veya bir dizi i\u00e7in:\n    items = [1, 2, 3];\n    addItemImmutable() {\n      this.items = [...this.items, 4]; \/\/ Yeni bir dizi referans\u0131 olu\u015fturuluyor\n    }\n\n    \/\/ Child Component (OnPush)\n    @Input() data: { value: string };\n    @Input() items: number[];<\/code><\/pre>\n
    Bu \u00f6rneklerde, data<\/code> veya items<\/code> nesnelerinin yeni bir referans\u0131 olu\u015fturuldu\u011fu i\u00e7in ChildComponent<\/code> do\u011fru bir \u015fekilde g\u00fcncellenecektir. Immutable.js veya Immer gibi k\u00fct\u00fcphaneler, daha karma\u015f\u0131k immutable veri y\u00f6netimi i\u00e7in kullan\u0131labilir.<\/p>\n
Async Pipe (async<\/code> pipe)<\/h4>\n
async<\/code> pipe, OnPush<\/code> stratejisi ile birlikte kullan\u0131ld\u0131\u011f\u0131nda m\u00fckemmel bir uyum sa\u011flar. Bir Observable<\/code> veya Promise<\/code> ile kullan\u0131ld\u0131\u011f\u0131nda, async<\/code> pipe otomatik olarak \u015funlar\u0131 yapar:
\n*   Observable<\/code> yeni bir de\u011fer yayd\u0131\u011f\u0131nda, Angular’a bu bile\u015feni markForCheck()<\/code> ile i\u015faretlemesini ve bir sonraki de\u011fi\u015fiklik alg\u0131lama d\u00f6ng\u00fcs\u00fcnde kontrol etmesini bildirir.
\n*   Bile\u015fen yok edildi\u011finde (destroyed), Observable<\/code> aboneli\u011fini otomatik olarak kald\u0131r\u0131r, b\u00f6ylece bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nler.<\/p>\n
Bu, OnPush<\/code> bile\u015fenlerinde Observable<\/code>‘lar\u0131 y\u00f6netmenin en temiz ve performansl\u0131 yoludur.<\/p>\n
import { Component, ChangeDetectionStrategy } from '@angular\/core';\nimport { Observable, interval } from 'rxjs';\nimport { map } from 'rxjs\/operators';\n\n@Component({\n  selector: 'app-async-data',\n  template: \n    
Async Pipe ile Veri:<\/h3>\n    
Say\u0131: {{ counter$ | async }}<\/p>\n  <\/code>,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AsyncDataComponent {\n  counter$: Observable;\n\n  constructor() {\n    this.counter$ = interval(1000).pipe(map(val => val + 1));\n  }\n}<\/code><\/pre>\n
Yukar\u0131daki \u00f6rnekte, interval<\/code> Observable her saniye yeni bir de\u011fer yayd\u0131\u011f\u0131nda, async<\/code> pipe AsyncDataComponent<\/code>‘i otomatik olarak kontrol ettirir ve UI g\u00fcncellenir.<\/p>\n
ChangeDetectorRef S\u0131n\u0131f\u0131<\/h4>\n
ChangeDetectorRef<\/code> s\u0131n\u0131f\u0131, OnPush<\/code> stratejisi ile \u00e7al\u0131\u015f\u0131rken de\u011fi\u015fiklik alg\u0131lama s\u00fcrecini manuel olarak kontrol etmenizi sa\u011flayan g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/p>\n
*   markForCheck()<\/code>:<\/strong> Bu metod, bile\u015fenin (veya \u00fcst bile\u015fenlerinin) durumunun de\u011fi\u015fmi\u015f olabilece\u011fini Angular’a bildirir ve bir sonraki de\u011fi\u015fiklik alg\u0131lama d\u00f6ng\u00fcs\u00fcnde bile\u015fenin kontrol edilmesini sa\u011flar. markForCheck()<\/code> metodu, bile\u015fenin @Input()<\/code> referans\u0131 de\u011fi\u015fmedi\u011finde ancak i\u00e7 durumu (\u00f6rne\u011fin, bir servisten gelen verilerle g\u00fcncellenen \u00f6zel bir \u00f6zellik) de\u011fi\u015fti\u011finde kullan\u0131\u015fl\u0131d\u0131r. Bu metod sadece bile\u015feni kontrol i\u00e7in i\u015faretler, hemen bir de\u011fi\u015fiklik alg\u0131lama d\u00f6ng\u00fcs\u00fc tetiklemez.<\/p>\n
import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular\/core';\n\n    @Component({\n      selector: 'app-manual-check',\n      template: \n        
Manual Check ile Veri:<\/h3>\n        
Mesaj: {{ message }}<\/p>\n