A set method replaces the current value of a writable Angular signal with a supplied value. Calling count.set(1) changes a signal initialized with 0 to 1, and the signal remains type-safe: a number signal accepts numbers, while a signal explicitly typed as string[] accepts string arrays. section 6.2.2
Use set when the replacement value is already available. When the new value depends on the current value, prefer the update method, whose callback receives the previous value. This distinction keeps direct assignments separate from derived changes such as increments or collection edits. section 6.2.2 section 6.8
In Angular components, set and update support reactive state changes:
- Use set for a complete replacement when the desired value does not need the previous signal value. section 6.2.2
- Use update for changes based on existing arrays or objects, such as approving a time-off request while preserving the other items. section 6.3.2
- Rely on signal dependencies so derived searches, pending-request counts, and other UI values can respond to changed request data. section 6.3.2 section 6.8
Changing a signal directly
const count = signal(0); console.log(count()); count.set(1); console.log(count()); The first read produces 0 and the second produces 1. In a time-off management component, the same mutation model handles request data, while update is appropriate for changing one request within the array. section 6.3.2
Listing 6.5 Changing signal values in a component
export class TimeOffManagementComponent {
requests = signal<TimeOffRequest[]>([
{
id: 1,
employeeId: 1,
startDate: new Date().toISOString(),
endDate: new Date().toISOString(),
type: 'Vacation',
status: 'Pending',
},
{
id: 2,
employeeId: 2,
startDate: new Date().toISOString(),
endDate: new Date().toISOString(),
type: 'Sick Leave',
status: 'Approved',
comment: 'Feeling pretty sick today :(',
},
]);
approveRequest(request: TimeOffRequest) { #1
this.requests.update((requests) => {
const index = requests.findIndex((r) => r.id === request.id);
return requests.map(
(item, i) => i === index ? ({
...item,
status: 'Approved',
}) : item);
});
}
rejectRequest(request: TimeOffRequest) { #2
this.requests.update((requests) => {
const index = requests.findIndex((r) => r.id === request.id);
return requests.map(
(item, i) => i === index ? ({
...item,
status: Rejected',
}) : item);
});
}
deleteRequest(request: TimeOffRequest) { #3
this.requests.update((requests) =>
requests.filter((r) => r.id !== request.id)
);
}
}
Inspect the component listing to see signal-backed time-off requests and an update-based approval operation. section 6.3.2
