Vilka är Angulars livscykelkrokar för komponenter?

Question

Accepted Answer

**Livscykelkrokar** är metoder som Angular anropar vid specifika tidpunkter i en komponents liv — skapande, inmatningsändringar, rendering och förstöring. Du implementerar dem genom att lägga till gränssnittsmetoder i din komponentklass.

## De huvudsakliga krokarna i ordning

```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 fullständiga sekvensen

```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 använder 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`** — standardplatsen för initialisering och datahämtning (till skillnad från konstruktorn är `@Input`-ar tillgängliga här).
- **`ngAfterViewInit`** — när barnvyer och `@ViewChild`-referenser finns.
- **`ngOnDestroy`** — rensning: avsluta prenumerationer på Observable-ar, rensa timers, ta bort lyssnare.

## Varför ngOnInit framför konstruktorn

Konstruktorn bör bara göra DI; inmatningar är inte bundna ännu. `ngOnInit` körs efter att Angular har konfigurerat komponenten och dess inmatningar — rätt plats för startlogik.

## Varför det spelar roll

Livscykelkrokar låter dig köra logik vid rätt tillfälle — initiera i `ngOnInit`, få åtkomst till den renderade vyn i `ngAfterViewInit`, och helt avgörande **rensa i `ngOnDestroy`** (att avsluta prenumerationen från Observable-ar är det #1 sättet att undvika minnesläckor i Angular).

Att känna till ordningen och rollen för varje kroka är väsentligt för korrekt datahämtning, DOM-åtkomst och resurshantering.