Updating Signals with set and update
Change signal values reactively.
Updating Signals with set and update is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Changing a Signal
A writable signal can be changed in two ways: set() to replace the value, and update() to derive a new value from the current one.
Using set()
set(newValue) replaces the signal value entirely with the value you pass.
const c = signal(0);
c.set(1);
console.log(c()); // 1When to Use set()
Use set() when the new value does not depend on the old one, for example assigning a fresh value from user input or an API response.
const name = signal('');
name.set('Alice');
console.log(name()); // AliceUsing update()
update(fn) takes a function that receives the current value and returns the new value. It is ideal when the next value depends on the previous one.
const c = signal(0);
c.update(v => v + 1);
console.log(c()); // 1Incrementing with update()
The classic counter uses update() to increment based on the existing count.
const count = signal(10);
count.update(v => v + 1); // 11
count.update(v => v - 1); // 10Updating Objects Immutably
Because change detection compares references, replace objects rather than mutating them. Spread the old value into a new object.
const point = signal({ x: 0, y: 0 });
point.update(p => ({ ...p, x: p.x + 1 }));
console.log(point()); // { x: 1, y: 0 }Updating Arrays Immutably
For arrays, return a new array. Avoid push/splice on the existing array; use spread or array methods that return new arrays.
const items = signal<string[]>(['a']);
items.update(arr => [...arr, 'b']);
console.log(items()); // ['a', 'b']set() vs update() Summary
set: you already have the final value. update: you compute the final value from the current one. Both notify consumers if the value actually changes.
Reference Equality and Change
Signals use reference (or value, for primitives) equality by default to decide whether anything changed. Setting a signal to the exact same primitive value does not notify dependents.
const c = signal(5);
c.set(5); // no change, dependents not notifiedMutating Is Discouraged
Older APIs had a mutate() method, but the recommended modern approach is immutable updates with set() and update() returning new references.
Updating Signals in Methods
In components, wrap signal updates in methods that the template can call from event handlers.
export class CounterComponent {
count = signal(0);
increment() { this.count.update(v => v + 1); }
reset() { this.count.set(0); }
}Quick Check: set vs update
Pick the right tool for the job.
Recap: Updating Signals
You learned set() to replace a value and update(fn) to derive a new value from the current one. You also saw how to update objects and arrays immutably so reference equality detects the change. Next: using signals directly in templates.
Frequently asked questions
Is the “Updating Signals with set and update” lesson free?
Yes — the full text of “Updating Signals with set and update” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “Updating Signals with set and update”?
Change signal values reactively. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Updating Signals with set and update” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- What Are Signals
- Creating and Reading Signals
- Updating Signals with set and update
- Signals in Templates