Angular Lifecycle Hook'ları

Angular’da yaşam döngüsü (lifecycle), bir bileşenin (component) veya yönergenin (directive) oluşturulması, güncellenmesi ve yok edilmesi sırasında tetiklenen bir dizi olay ve yöntemi ifade eder. Bu yaşam döngüsü, bir bileşenin veya yönergenin belirli bir anda hangi işlemleri gerçekleştirebileceğini kontrol etmenizi sağlar.

Angular’da yaşam döngüsü, belirli metodların (lifecycle hooks) tetiklenmesiyle yönetilir. Bu metodlar Angular tarafından belirli bir sıraya göre çağrılır ve bileşen ya da direktif üzerinde çeşitli işlemler yapmamıza olanak tanır.

1. `ngOnChanges`

Amaç: Bir bileşene gelen @Input() özelliği değiştiğinde tetiklenir.
Ne Zaman Çalışır?
- İlk başlatma sırasında.
- @Input dekoratörüne sahip değerler değiştiğinde.

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<p>Child Component</p>',
})
export class ChildComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges): void {
    console.log('Input değişti:', changes);
  }
}

2. `ngOnInit`

Amaç: Bileşen veya yönerge ilk kez başlatıldığında tetiklenir.
Ne Zaman Çalışır?
- İlk oluşturulduğunda, bir kez tetiklenir.

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

@Component({
  selector: 'app-example',
  template: '<p>Example Component</p>',
})
export class ExampleComponent implements OnInit {
  ngOnInit(): void {
    console.log('Component oluşturuldu.');
  }
}

3. `ngDoCheck`

Amaç: Angular’ın değişiklik algılama mekanizması (change detection) çalıştığında her seferinde tetiklenir.
Ne Zaman Çalışır?
- Angular’ın herhangi bir değişiklik aradığı her durumda çalışır.

4. `ngAfterContentInit`

Amaç: Bileşenin içerik (projection content) yüklemesi tamamlandığında tetiklenir.
Ne Zaman Çalışır?
- Sadece bir kez çalışır, içerik yüklendikten hemen sonra.

5. `ngAfterContentChecked`

Amaç: İçerik yüklendikten sonra değişiklik algılamaları tamamlandığında tetiklenir.
Ne Zaman Çalışır?
- Her değişiklik algılama sırasında çalışır.

6. `ngAfterViewInit`

Amaç: Bileşenin şablonundaki tüm görünüm (view) bileşenleri oluşturulduğunda tetiklenir.
Ne Zaman Çalışır?
- Bir kez, görünüm oluşturulduktan hemen sonra.

7. `ngAfterViewChecked`

Amaç: Görünümdeki (view) değişiklik algılama mekanizması tamamlandığında tetiklenir.
Ne Zaman Çalışır?
- Her değişiklik algılamadan sonra.

8. `ngOnDestroy`

Amaç: Bileşen yok edilmeden hemen önce tetiklenir.
Ne Zaman Çalışır?
- Bileşen DOM’dan kaldırılmadan hemen önce.

Angular Yaşam Döngüsü Sırası

Angular’daki yaşam döngüsü metotları, şu sırayla çalışır:

ngOnChanges (Varsa, ilk kez ve @Input değiştiğinde).
ngOnInit (Bileşen başlatıldığında, yalnızca bir kez).
ngDoCheck (Değişiklik algılama mekanizması çalıştığında).
ngAfterContentInit (İçerik yüklendiğinde, bir kez).
ngAfterContentChecked (İçerik kontrolü her tamamlandığında).
ngAfterViewInit (Görünüm oluşturulduğunda, bir kez).
ngAfterViewChecked (Görünüm kontrolü her tamamlandığında).
ngOnDestroy (Bileşen yok edilmeden önce).

Kullanım İpuçları

ngOnInit: İlk başlatma işlemleri için kullanılır (örn. veri yükleme).
ngOnDestroy: Temizlik işlemleri (örn. abonelik iptali, timer temizliği) için kullanılır.
ngAfterViewInit ve ngAfterViewChecked: DOM manipülasyonları için uygundur.
ngDoCheck: Performans maliyeti yüksektir; gerektiğinde kullanın.

Bu yaşam döngüsü metotları, Angular uygulamanızda kontrol ve performans optimizasyonu sağlar. 😊

https://v17.angular.io/guide/lifecycle-hooks

https://m-talhaersoy.medium.com/angular-lifecycle-hooks-1be6a665c9ae

Blog