X'inhuma l-hooks tal-ċiklu tal-ħajja tal-komponent ta' Angular?

Question

Accepted Answer

**L-hooks tal-ċiklu tal-ħajja** huma metodi li Angular jidħin fi mumenti speċifiċi fil-ħajja tal-komponent — ħolqien, bidliet ta' input, rendering, u distruzzjoni. Inti jimplementawhom billi tiddaħħlu metodi tal-interface fil-klassi tal-komponent tagħkom.

## L-hooks ewlenin skond l-ordni

```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
  }
}
```

## Is-sekwenza kompleta

```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)
```

## It-tliet li tuża l-aktar

```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`** — il-post standard għall-inizjalizzazzjoni u għall-fetch ta' data (bilqis mill-kostruttore, `@Input` huma disponibbli hawnhekk).
- **`ngAfterViewInit`** — meta l-views tal-ulied u r-referenzi `@ViewChild` jeżistu.
- **`ngOnDestroy`** — naddif: unsubscribe mill-Observable, imbaxxi t-timers, neħħi l-listeners.

## Għaliex ngOnInit minflok il-kostruttore

Il-kostruttore għandu jsir biss DI; l-inputs għadhom mhux magħqudin hemm. `ngOnInit` jaħdem wara li Angular iddaħħal il-komponent u l-inputs tiegħu — il-post korrett għall-logika ta' startup.

## Għaliex huwa importanti

L-hooks tal-ċiklu tal-ħajja jippermettulek tħarrex il-logika fil-waqt it-tajjeb — inizjalizza f' `ngOnInit`, ċessorja l-view irranderata f' `ngAfterViewInit`, u verament **naddif f' `ngOnDestroy`** (unsubscribe mill-Observable hija l-mod #1 biex tevita memory leaks fl-Angular).

Il-għarfien tal-ordni u r-rwol ta' kull hook huwa essenzjali għall-fetch ta' data korrett, l-access DOM, u l-immaniġġ tar-risorsi.