Angular ਦੇ component lifecycle hooks ਕੀ ਹਨ?

Question

Accepted Answer

**Lifecycle hooks** ਉਹ methods ਹਨ ਜੋ Angular ਕਿਸੇ component ਦੀ ਜ਼ਿੰਦਗੀ ਦੇ ਖ਼ਾਸ ਪਲਾਂ 'ਤੇ ਕਾਲ ਕਰਦਾ ਹੈ — ਸਿਰਜਣਾ, input ਤਬਦੀਲੀਆਂ, rendering, ਅਤੇ ਵਿਨਾਸ਼। ਤੁਸੀਂ ਆਪਣੀ component class ਵਿੱਚ interface methods ਸ਼ਾਮਲ ਕਰਕੇ ਇਨ੍ਹਾਂ ਨੂੰ ਲਾਗੂ ਕਰਦੇ ਹੋ।

## ਮੁੱਖ 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 ਦੇ ਕ੍ਰਮ ਅਤੇ ਭੂਮਿਕਾ ਨੂੰ ਜਾਣਨਾ data fetching, DOM access, ਅਤੇ resource management ਲਈ ਜ਼ਰੂਰੀ ਹੈ।