Hvordan fungerer ændringsdetektion i Angular, og hvad gør OnPush?

Question

Accepted Answer

**Ændringsdetektion** er hvordan Angular holder DOM synkroniseret med komponentdata — efter enhver potentielt tilstandsændring af en begivenhed kontrollerer den komponenter og opdaterer visningen hvor data er ændret. Som standard er denne kontrol omfattende; **`OnPush`** indsnævrer den for ydeevne.

## Sådan fungerer standardændringsdetektion

```text
An async event fires (click, HTTP response, setTimeout) →
Zone.js notifies Angular → Angular checks the ENTIRE component tree
top-to-bottom → updates any bindings whose values changed.
```

Som standard (`Default` strategi) kontrollerer Angular **hver komponent** på hver begivenhed — korrekt, men potentielt spildende i store træer.

## OnPush — spring komponenter over der ikke kan være ændret

```ts
import { ChangeDetectionStrategy, Component } from "@angular/core";

@Component({
  selector: "app-user",
  changeDetection: ChangeDetectionStrategy.OnPush, // opt in
  template: `{{ user.name }}`,
})
export class UserComponent {
  @Input() user!: User;
}
```

Med `OnPush` **springer** Angular kontrol af denne komponent over, medmindre en af disse sker:

```text
1. An @Input REFERENCE changes (new object, not a mutation of the same one)
2. An event fires from within the component (click, etc.)
3. An Observable bound via the async pipe emits
4. You manually call markForCheck()
```

Dette kan dramatisk reducere arbejdet i store træer — Angular ignorerer hele undertræer som den ved ikke kan være ændret.

## Vigtigste gotcha: uforanderlighed påkrævet

```ts
// ❌ mutating doesn't change the reference → OnPush won't detect it
this.user.name = "Bob";

// ✅ create a NEW object → reference changes → OnPush updates
this.user = { ...this.user, name: "Bob" };
```

`OnPush` er afhængig af **referenceændringer** for input, så du skal opdatere tilstand uforanderligt (nye objekter/arrays). Mutation på stedet er den klassiske OnPush-fejl — visningen opdateres ikke.

## Manuel kontrol

```ts
constructor(private cdr: ChangeDetectorRef) {}
this.cdr.markForCheck();   // mark this component for the next check
this.cdr.detectChanges();   // run change detection now
```

## Fremtiden: signals + zoneless

Signals muliggør endnu mere præcise, **finkornet** opdateringer (kun visninger der læser et ændret signal), hvilket peger mod at fjerne Zone.js helt.

## Hvorfor det betyder noget

Ændringsdetektion er central for Angular-ydeevne.

Forståelse af at standardstrategien kontrollerer hele træet — og at `OnPush` + uforanderlige data begrænser kontrol til komponenter hvis input faktisk er ændret — er den vigtigste udnyttelse til optimering af store apps.

Kravet om uforanderlighed er en hyppig kilde til "hvorfor opdateres min visning ikke?"-fejl, og signals repræsenterer hvor Angular er på vej hen for endnu mere finkornet, mere effektiv reaktivitet.