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`** — cleanup: 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`-তে cleanup করুন** (Observables থেকে unsubscribe করা Angular-এ memory leaks এড়ানোর #1 উপায়)।

প্রতিটি hook-এর ক্রম এবং ভূমিকা জানা সঠিক data fetching, DOM access এবং resource management-এর জন্য অপরিহার্য।