Angular Academy · Lesson

Updating Signals with set and update

Change signal values reactively.

Lesson 3 of 413 steps

Updating Signals with set and update is a free Angular Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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()); // 1

When 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()); // Alice

Using 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()); // 1

Incrementing 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); // 10

Updating 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 notified

Mutating 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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Updating Signals with set and update” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Updating Signals with set and update”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

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

← Back to Angular Academy