Cilat janë hook-et e ciklus të jetës së komponentit në Angular?

Question

IT Interview Practice · Accepted Answer

**Hook-et e ciklus të jetës** janë metoda që Angular i thërret në momente specifike të jetës së komponentit — krijim, ndryshime në hyrje, përshkrimin, dhe shkatërrim. Ju i zbatoni ato duke shtuar metoda të ndërfaqes në klasën e komponentit.

## Hook-et kryesore në rend

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

## Sekuenca e plotë

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

## Tre hook-et që i përdorni më shumë

```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`** — vendi standard për inicializim dhe shkarkim të të dhënave (ndryshe nga konstruktori, `@Input`-et janë të disponueshme këtu).
- **`ngAfterViewInit`** — kur pamjet e fëmijëve dhe referencat `@ViewChild` ekzistojnë.
- **`ngOnDestroy`** — pastrimi: hiquni nga Observable-et, fshini kohëmatësit, hiqni dëgjuesit.

## Pse ngOnInit në vend të konstruktorit

Konstruktori duhet të bëjë vetëm DI; hyrjet nuk janë ende të lidhura atje. `ngOnInit` bëhet pasi Angular ka konfiguruese komponentën dhe hyrjet e saj — vendi i duhur për logjikën e fillimit.

## Pse ka rëndësi

Hook-et e ciklus të jetës ju lejojnë të ekzekutoni logjikën në kohën e duhur — inicializim në `ngOnInit`, qasje në pamjen e përshkruar në `ngAfterViewInit`, dhe në mënyrë vendimtare **pastrimi në `ngOnDestroy`** (nënshkrimi nga Observable-et është mënyra #1 për të shmangur rrjedhjet e kujtesës në Angular).

Dija e rendit dhe roli i secilit hook është thelbësor për marrjen e të dhënave të duhura, qasjen në DOM, dhe menaxhimin e burimeve.

Hook-et kryesore në rend

Sekuenca e plotë

Tre hook-et që i përdorni më shumë

Pse ngOnInit në vend të konstruktorit

Pse ka rëndësi

Pyetje të ngjashme