angular signals

[yakhaldy]

Select Topic Area

Question

Body

During a recent Angular project, I initially relied on Zone.js and the traditional change detection cycle.
However, the complexity started increasing — especially in scenarios with frequent state updates and deeply nested UI components.

After digging deeper into Angular’s latest updates, I shifted to the new Signals-based reactivity model, and the difference in control and predictability was immediately noticeable.

𝑾𝒉𝒂𝒕 𝑺𝒊𝒈𝒏𝒂𝒍𝒔 𝑪𝒉𝒂𝒏𝒈𝒆 𝒊𝒏 𝑨𝒏𝒈𝒖𝒍𝒂𝒓'𝒔 𝑹𝒆𝒂𝒄𝒕𝒊𝒗𝒆 𝑴𝒐𝒅𝒆𝒍
Angular Signals introduce fine-grained reactivity — meaning the framework now tracks exact dependencies instead of triggering global change detection.

The new APIs include:

signal() → mutable reactive state

computed() → derived readonly state

linkedSignal() → hybrid reactive state (derived + user-modifiable)

input() / model() → signal-based bindings for component interactions

No more depending fully on Zones or manual subscriptions.

𝐌𝐢𝐧𝐢𝐦𝐚𝐥 𝐄𝐱𝐚𝐦𝐩𝐥𝐞

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

const count = signal(1);
const total = computed(() => count() * 3);

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

count.update(v => v + 1);

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

Behind the scenes, Angular tracks the dependencies of total() and schedules updates only when count() changes — no template dirty checking, no unnecessary renders.

𝐋𝐢𝐧𝐤𝐞𝐝 𝐒𝐢𝐠𝐧𝐚𝐥𝐬: 𝐓𝐡𝐞 𝐌𝐨𝐬𝐭 𝐈𝐧𝐭𝐞𝐫𝐞𝐬𝐭𝐢𝐧𝐠 𝐏𝐚𝐫𝐭

const base = signal(10);

const value = linkedSignal({
source: () => base() * 2,
equals: Object.is,
update: (currentValue, newValue) => newValue
});

This pattern is incredibly useful when:

A value has a default reactive source,

But the UI/user may override it,

And logic must decide when to fallback or persist state.

This solves cases like form auto-population, dynamic pricing, or adaptive UI states — previously requiring Subjects, RxJS operators, and manual cleanup.

𝐖𝐡𝐲 𝐓𝐡𝐢𝐬 𝐌𝐚𝐭𝐭𝐞𝐫𝐬

Feature Zone.js Model Signals Model

Change Detection Global Fine-grained
Cleanup Manual (Subscriptions) Automatic
Learning Curve Depends on RxJS Local + Simple
Performance Always runs tree traversal Runs only where dependencies change

𝐂𝐨𝐧𝐜𝐥𝐮𝐬𝐢𝐨𝐧

Angular’s shift toward Signal-driven reactivity brings:

Predictable state flow

Better performance (especially in large UIs)

A cleaner mental model compared to complex RxJS chains — while still allowing RxJS where needed

This is a major step toward a more modern Angular ecosystem — closer to frameworks like SolidJS, Vue 3 Composition API, and Svelte.

[Sabari-Vasan-SM]

I ran into similar issues with Zone.js during an Angular project, especially when the UI got more complex. Switching to the new Signals model made a huge difference — updates became more predictable, performance improved, and I didn’t have to manage tons of subscriptions.

Signals like signal(), computed(), and linkedSignal() give much better control over state and make the whole flow easier to reason about. It feels more modern and closer to frameworks like SolidJS and Svelte.

Overall, Signals made my codebase cleaner and the UI faster. Definitely worth the shift.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬