Angular Academy · Les

Signals bijwerken met set en update

Wijzig signalwaarden reactief.

Les 3 van 413 stappen

Signals bijwerken met set en update is een gratis Angular Academy-les op CoddyKit. Dit is les 3 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.

Een signaal wijzigen

Een schrijfbaar signaal kan op twee manieren worden gewijzigd: met set() vervang je de waarde en met update() leid je een nieuwe waarde af uit de huidige waarde.

set() gebruiken

set(newValue) vervangt de signaalwaarde volledig door de waarde die je doorgeeft.

const c = signal(0);
c.set(1);
console.log(c()); // 1

Wanneer gebruik je set()?

Gebruik set() wanneer de nieuwe waarde niet afhankelijk is van de oude, bijvoorbeeld wanneer je een nieuwe waarde toewijst vanuit invoer van de gebruiker of een API-reactie.

const name = signal('');
name.set('Alice');
console.log(name()); // Alice

update() gebruiken

update(fn) accepteert een functie die de huidige waarde ontvangt en de nieuwe waarde retourneert. Dit is ideaal wanneer de volgende waarde afhankelijk is van de vorige.

const c = signal(0);
c.update(v => v + 1);
console.log(c()); // 1

Verhogen met update()

De klassieke teller gebruikt update() om de bestaande telling te verhogen.

const count = signal(10);
count.update(v => v + 1); // 11
count.update(v => v - 1); // 10

Objecten onveranderlijk bijwerken

Omdat wijzigingsdetectie referenties vergelijkt, vervang je objecten in plaats van ze te muteren. Gebruik de spreadsyntaxis van de oude waarde in een nieuw object.

const point = signal({ x: 0, y: 0 });
point.update(p => ({ ...p, x: p.x + 1 }));
console.log(point()); // { x: 1, y: 0 }

Arrays onveranderlijk bijwerken

Retourneer bij arrays een nieuwe array. Vermijd push/splice op de bestaande array; gebruik spread of arraymethoden die nieuwe arrays retourneren.

const items = signal<string[]>(['a']);
items.update(arr => [...arr, 'b']);
console.log(items()); // ['a', 'b']

Samenvatting van set() versus update()

set: je hebt de uiteindelijke waarde al. update: je berekent de uiteindelijke waarde vanuit de huidige waarde. Beide informeren afnemers als de waarde daadwerkelijk verandert.

Referentiegelijkheid en wijzigingen

Signalen gebruiken standaard gelijkheid van referenties (of van waarden bij primitieve waarden) om te bepalen of er iets is gewijzigd. Als je een signaal instelt op exact dezelfde primitieve waarde, worden afhankelijke onderdelen niet geïnformeerd.

const c = signal(5);
c.set(5); // no change, dependents not notified

Muteren wordt afgeraden

Oudere API's hadden een methode mutate(), maar de aanbevolen moderne aanpak bestaat uit onveranderlijke updates met set() en update() die nieuwe referenties retourneren.

Signalen in methoden bijwerken

Wikkel signaalupdates in componenten in methoden die de sjabloon vanuit gebeurtenisafhandelaars kan aanroepen.

export class CounterComponent {
  count = signal(0);
  increment() { this.count.update(v => v + 1); }
  reset() { this.count.set(0); }
}

Korte controle: set vs update

Kies het juiste hulpmiddel voor de taak.

Beantwoord dit in de interactieve les

Samenvatting: signalen bijwerken

Je hebt set() geleerd om een waarde te vervangen en update(fn) om een nieuwe waarde af te leiden van de huidige waarde. Je hebt ook gezien hoe je objecten en arrays onveranderlijk bijwerkt, zodat referentiegelijkheid de wijziging detecteert. Hierna: signalen rechtstreeks in sjablonen gebruiken.

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 “Signals bijwerken met set en update” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Signals bijwerken met set en update”, 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 “Signals bijwerken met set en update”?

Wijzig signalwaarden reactief. 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 3 van 4.

Hoe lang duurt de les “Signals bijwerken met set en update”?

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