Angular کے component lifecycle hooks کیا ہیں؟

Question

Accepted Answer

**Lifecycle hooks** Angular کے طریقے ہیں جو کسی component کی زندگی کے مخصوص لمحوں میں — تخلیق، input تبدیلیوں، rendering، اور تباہی — بلائے جاتے ہیں۔ آپ انہیں اپنی component class میں interface methods شامل کر کے implement کرتے ہیں۔

## ترتیب میں main hooks

```ts
import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges } from "@angular/core";

@Component({ ... })
export class MyComponent implements OnInit, OnDestroy, OnChanges {
  ngOnChanges(changes: SimpleChanges) {
    // called when an @Input value changes (before ngOnInit the first time)
  }
  ngOnInit() {
    // called ONCE after the first ngOnChanges — do initialization, fetch data
  }
  ngOnDestroy() {
    // called just before the component is removed — CLEAN UP here
  }
}
```

## مکمل ترتیب

```text
constructor          → DI happens; inputs NOT yet available
ngOnChanges          → when @Input values are set/changed
ngOnInit             → once, after first ngOnChanges ★ (init, fetch data)
ngDoCheck            → every change detection run (custom change detection)
ngAfterContentInit   → projected content (<ng-content>) initialized
ngAfterViewInit      → the component's view + child views ready ★ (access @ViewChild)
ngAfterViewChecked   → after each view check
ngOnDestroy          → before removal ★ (unsubscribe, clear timers)
```

## تین جو آپ سب سے زیادہ استعمال کرتے ہیں

```ts
ngOnInit() {
  this.userService.getUsers().subscribe(u => this.users = u); // init/fetch — inputs are ready
}
ngAfterViewInit() {
  this.chart.nativeElement.focus(); // the DOM/@ViewChild exists now
}
ngOnDestroy() {
  this.subscription.unsubscribe();   // prevent memory leaks!
  clearInterval(this.timer);
}
```

- **`ngOnInit`** — initialization اور data fetching کے لیے معیاری جگہ (constructor کے برعکس، `@Input`s یہاں دستیاب ہیں)۔
- **`ngAfterViewInit`** — جب child views اور `@ViewChild` references موجود ہوں۔
- **`ngOnDestroy`** — صفائی: Observables سے unsubscribe کریں، timers صاف کریں، listeners ہٹائیں۔

## constructor پر ngOnInit کو کیوں ترجیح دی جائے

Constructor کو صرف DI کرنی چاہیے؛ inputs ابھی وہاں bound نہیں ہیں۔ `ngOnInit` اس کے بعد چلتا ہے جب Angular component اور اس کے inputs کو سیٹ اپ کر چکا ہو — یہ startup logic کے لیے صحیح جگہ ہے۔

## یہ کیوں اہم ہے

Lifecycle hooks آپ کو صحیح وقت پر logic چلانے دیتے ہیں — `ngOnInit` میں initialize کریں، `ngAfterViewInit` میں rendered view تک رسائی حاصل کریں، اور اہم طور پر **`ngOnDestroy` میں صفائی کریں** (Observables سے unsubscribe کرنا Angular میں memory leaks سے بچنے کا #1 طریقہ ہے)۔

ہر hook کی ترتیب اور کردار جاننا correct data fetching، DOM access، اور resource management کے لیے ضروری ہے۔