Wat zijn Angular's component lifecycle hooks?

Question

Accepted Answer

**Lifecycle hooks** zijn methodes die Angular aanroept op specifieke momenten in het leven van een component — creatie, invoerwijzigingen, rendering en vernietiging. Je implementeert ze door interfacemethodes toe te voegen aan je componentklasse.

## Waarom het belangrijk is

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

## De volledige volgorde

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

## De drie die je het meest gebruikt

```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`** — de standaardplaats voor initialisatie en geophalen van gegevens (anders dan in de constructor zijn `@Input`s hier beschikbaar).
- **`ngAfterViewInit`** — wanneer onderliggende weergaven en `@ViewChild` verwijzingen bestaan.
- **`ngOnDestroy`** — opschoning: afmelden bij Observables, timers wissen, listeners verwijderen.

## Waarom ngOnInit boven de constructor

De constructor mag alleen DI doen; invoeren zijn daar nog niet gebonden. `ngOnInit` wordt uitgevoerd nadat Angular de component en zijn invoeren heeft ingesteld — de juiste plaats voor opstartslogica.

## Waarom het belangrijk is

Lifecycle hooks laten je logica op het juiste moment uitvoeren — initialiseer in `ngOnInit`, benadruk de weergegeven weergave in `ngAfterViewInit`, en cruciaal **opschonen in `ngOnDestroy`** (afmelden bij Observables is de #1 manier om geheugenlekkages in Angular te voorkomen).

Het kennen van de volgorde en de rol van elke hook is essentieel voor correct geophalen van gegevens, DOM-toegang en resourcebeheer.