Angular Academy · Les

Computed signals

Leid waarden af die automatisch worden bijgewerkt.

Les 1 van 413 stappen

Computed signals is een gratis Angular Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.

Wat is een computed signal

Een computed()-signal leidt een waarde af uit een of meer andere signals. Zodra een bron-signal verandert, wordt de berekende waarde lui opnieuw berekend — alleen wanneer iets de waarde leest.

Computed signals zijn alleen-lezen: je kunt er geen .set() op aanroepen.

Een computed maken

Je geeft een functie door aan computed(). Angular houdt automatisch elk signal bij dat je daarin leest.

import { signal, computed } from '@angular/core';

const price = signal(100);
const quantity = signal(2);

const total = computed(() => price() * quantity());

console.log(total()); // 200

Automatische afhankelijkheden bijhouden

Je declareert afhankelijkheden nooit handmatig. Door price() en quantity() in de callback te lezen, registreert Angular ze automatisch als afhankelijkheden.

Als een signal conditioneel wordt gelezen en die code niet wordt bereikt, wordt het tijdens die uitvoering niet bijgehouden.

const showTax = signal(false);
const tax = signal(20);
const base = signal(100);

const final = computed(() =>
  showTax() ? base() + tax() : base()
);
// When showTax() is false, "tax" is NOT a dependency

Luiheid en memoization

Een computed wordt alleen uitgevoerd wanneer je het leest en slaat het resultaat op. Als je het twee keer leest zonder wijzigingen in de bron, wordt de functie één keer uitgevoerd.

const a = signal(1);
const doubled = computed(() => {
  console.log('recompute');
  return a() * 2;
});

doubled(); // logs "recompute", returns 2
doubled(); // cached, returns 2, no log

Computed signals aan elkaar koppelen

Computed signals kunnen afhankelijk zijn van andere computed signals, waardoor een reactieve graaf ontstaat.

const firstName = signal('Ada');
const lastName = signal('Lovelace');

const fullName = computed(() => firstName() + ' ' + lastName());
const greeting = computed(() => 'Hello, ' + fullName());

console.log(greeting()); // Hello, Ada Lovelace

computed gebruiken in een component

Computed signals komen goed tot hun recht in componenten. De template wordt alleen opnieuw weergegeven wanneer de berekende waarde daadwerkelijk verandert.

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-cart',
  template: '<p>Total: {{ total() }}</p>'
})
export class CartComponent {
  items = signal([10, 20, 30]);
  total = computed(() => this.items().reduce((a, b) => a + b, 0));
}

Computed signals zijn alleen-lezen

Een computed signal instellen veroorzaakt een compileerfout. Ze zijn uitsluitend bedoeld om afgeleide status uit te drukken.

const count = signal(0);
const doubled = computed(() => count() * 2);

// doubled.set(10); // ERROR: Property 'set' does not exist
count.set(5);       // OK - update the source instead
console.log(doubled()); // 10

Gelijkheid en overgeslagen herberekeningen

Een computed gebruikt standaard Object.is om te vergelijken. Als de nieuwe berekende waarde gelijk is aan de oude, worden afhankelijke onderdelen niet op de hoogte gebracht en voorkom je onnodig werk.

const value = signal(2);
const isEven = computed(() => value() % 2 === 0);

// value 2 -> 4 -> 6 all yield isEven() === true
// Dependents of isEven do NOT re-run on those changes

Een aangepaste gelijkheidsfunctie

Je kunt een optie equal doorgeven om te bepalen wanneer een computed als gewijzigd wordt beschouwd — handig voor objecten of arrays.

const data = signal({ id: 1, name: 'A' });

const view = computed(
  () => data(),
  { equal: (a, b) => a.id === b.id }
);
// Dependents re-run only when the id changes

Vermijd neveneffecten in computed

Een computed moet puur zijn: geen HTTP-aanroepen, geen logging als gedrag en geen wijzigingen aan andere signals. Neveneffecten horen in effect(). Door computed puur te houden, blijft de reactieve graaf voorspelbaar.

Computed versus methoden

Een templatemethode wordt bij elke cyclus van wijzigingsdetectie uitgevoerd. Een computed wordt alleen uitgevoerd wanneer zijn afhankelijkheden veranderen en slaat het resultaat op — veel efficiënter voor afgeleide waarden.

// Method: recalculates every CD cycle
getTotal() { return this.items().reduce((a, b) => a + b, 0); }

// Computed: memoized, runs only on item change
total = computed(() => this.items().reduce((a, b) => a + b, 0));

Korte controle

Test je begrip van computed signals.

Beantwoord dit in de interactieve les

Samenvatting: computed signals

Je hebt geleerd dat computed() alleen-lezen afgeleide signals maakt met automatische registratie van afhankelijkheden, luie evaluatie en memoization.

Houd ze puur — zonder neveneffecten.
Ze kunnen afhankelijk zijn van andere computed signals.
Gebruik equal voor aangepaste wijzigingsdetectie.

Volgende: neveneffecten uitvoeren met effect().

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 38
Lessen: 144

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Computed signals” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Computed signals”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.

Wat leer ik in “Computed signals”?

Leid waarden af die automatisch worden bijgewerkt. Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Angular Academy te beginnen?

Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Computed signals”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Angular Academy?

Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Angular Academy