Hvad er Angular's component lifecycle hooks?

Question

IT Interview Practice · Accepted Answer

**Lifecycle hooks** er metoder, som Angular kalder på bestemte tidspunkter i en komponents levetid — oprettelse, input-ændringer, rendering og ødelæggelse. Du implementerer dem ved at tilføje interface-metoder til din komponentklasse.

## De vigtigste hooks i orden

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

## Den fulde sekvens

```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 tre du bruger mest

```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`** — standardstedet for initialisering og datahentning (i modsætning til konstruktøren er `@Input`s tilgængelige her).
- **`ngAfterViewInit`** — når child views og `@ViewChild` referencer eksisterer.
- **`ngOnDestroy`** — oprydning: afmeld dig fra Observables, ryd timere, fjern listeners.

## Hvorfor ngOnInit i stedet for konstruktøren

Konstruktøren bør kun lave DI; inputs er ikke bundet endnu. `ngOnInit` køres efter at Angular har sat komponenten og dens inputs op — det rigtige sted for startup-logik.

## Hvorfor det betyder noget

Lifecycle hooks lader dig køre logik på det rigtige tidspunkt — initialiser i `ngOnInit`, få adgang til den renderede view i `ngAfterViewInit`, og vigtigt **ryd op i `ngOnDestroy`** (afmelding fra Observables er den bedste måde at undgå memory leaks i Angular).

At kende rækkefølgen og rollen for hver hook er vigtig for korrekt datahentning, DOM-adgang og ressourcestyring.

De vigtigste hooks i orden

Den fulde sekvens

De tre du bruger mest

Hvorfor ngOnInit i stedet for konstruktøren

Hvorfor det betyder noget

Relaterede spørgsmål