Building Reactive Apps Easily with Angular Signals
At Halodoc, our journey with Angular has been marked by the continuous development and enhancement of various web applications. With this extensive experience, we are committed to simplifying complex concepts and harnessing Angular’s full potential.
Traditionally, Angular relied on Observables for reactive state management. While powerful, managing Observables — especially ensuring manual unsubscription — could be tricky. Failure to unsubscribe correctly often led to memory leaks, unexpected errors, and performance degradation.
To solve this, Angular introduced Signals — a new reactive building block that holds a value and automatically informs dependent components whenever that value changes. This built-in reactivity:
- Eliminates the need for manual subscriptions
- Simplifies state management
- Boosts app performance through more targeted change detection
Challenges with Observables
- Manual Subscription Management: Without proper cleanup, active subscriptions may linger after a component is destroyed, causing memory leaks and slowdowns.
- Best Suited For: Complex asynchronous operations, event streams, and scenarios needing operators for filtering, combining, or sequencing data.
The following example demonstrates the potential issues arising from improper subscription management, leading to unintended side effects or memory leaks.


Unsubscribing the right way cleans up connections, saves resources, and stops things from happening when they shouldn't, often using tools like takeUntil()
or AsyncPipe
.
RxJS remains essential for handling complex tasks, such as the example below:

This guide explores the shift from Observables to Signals, highlighting key advantages and best practices to enhance your Angular development skills.
Why Signals?
Signals offer a simpler, lighter, and more automatic reactive system compared to Observables for many use cases:
Key Benefits:
- Simpler Syntax: Easier to read and write compared to RxJS.
- Built-in Automatic Change Detection: Updates UI automatically when signal values change. No manual subscription or unsubscription needed.
- Performance Optimization: Only components dependent on a changed signal are re-evaluated, making updates faster and more efficient.
- Declarative Data Flow: Signals promote a clearer, easier-to-follow architecture.
- Automatic Cleanup: Signals handle resource cleanup themselves, reducing risk of memory leaks.
- Reduced Boilerplate: Less setup code required, leading to faster development and fewer bugs.
Observables vs Signals
Feature | Observables | Signals |
---|---|---|
Subscriptions | Need to manage manually | Automatic |
Cleanup | Must unsubscribe | Handled for you |
Syntax | Complex | Very simple |
Use case | Complex streams (e.g., WebSockets) | Local UI state |
How to Work with Signals: A Quick Guide
Angular Signals are a powerful mechanism for managing state and enabling fine-grained reactivity within your Angular applications. Instead of relying on change detection to scan entire component trees, Signals allow for targeted updates only when the data they hold changes. Here's a breakdown of their core functionality:
- Simple Implementation Signals

- Updating Signal Values: You modify the value of a Signal using its .set(), .update(), or .mutate() methods. These methods not only change the internal value but also trigger notifications to any parts of your code that are listening to this Signal.

- Computed Signals Derived Values: You can create computed Signals that automatically derive their value from one or more other Signals. They are automatically re-calculated only when their dependencies change.

- How Effects Work with Signals: An effect in Angular automatically watches all the signals you use inside it. Whenever any of those signals change, the effect runs again by itself. You usually use effects for things that happen outside the normal screen updates, like calling an API, writing to the console, or starting a timer. Also, when you create an effect, it runs immediately once with the current signal values, and then keeps running whenever any of those values change.

Angular Signals automatically track where their values are used, whether in templates, computed values, or effects. This smart dependency tracking allows Angular to update only the specific parts of the application that rely on a changed Signal. As a result, updates become faster and more efficient, avoiding the large and slower change detection cycles seen in earlier versions of Angular.
Angular Component: Fetching and Displaying Products with Loading and Error Handling

In the above example, there is no need for manual unsubscriptions. The Product Signals automatically manage the unsubscription process.
Conclusion
Angular Signals enhance local data handling, making apps feel more responsive and smoother. While Signals excel at this, RxJS remains essential for handling complex tasks. By leveraging Signals for fast local updates and RxJS for robust background operations, you can build efficient and user-friendly Angular applications.
References
- Signals In Angular Docs
Join Us
Scalability, reliability, and maintainability are the three pillars that govern what we build at Halodoc Tech. We are actively looking for engineers at all levels and if solving hard problems with challenging requirements is your forte, please reach out to us with your resumé at careers.india@halodoc.com
About Halodoc
Halodoc is the number one all-around healthcare application in Indonesia. Our mission is to simplify and deliver quality healthcare across Indonesia, from Sabang to Merauke. Since 2016, Halodoc has been improving health literacy in Indonesia by providing user-friendly healthcare communication, education, and information (KIE). In parallel, our ecosystem has expanded to offer a range of services that facilitate convenient access to healthcare, starting with Homecare by Halodoc as a preventive care feature that allows users to conduct health tests privately and securely from the comfort of their homes; My Insurance, which allows users to access the benefits of cashless outpatient services in a more seamless way; Chat with Doctor, which allows users to consult with over 20,000 licensed physicians via chat, video or voice call; and Health Store features that allow users to purchase medicines, supplements and various health products from our network of over 4,900 trusted partner pharmacies. To deliver holistic health solutions in a fully digital way, Halodoc offers Digital Clinic services including Haloskin, a trusted dermatology care platform guided by experienced dermatologists.We are proud to be trusted by global and regional investors, including the Bill & Melinda Gates Foundation, Singtel, UOB Ventures, Allianz, GoJek, Astra, Temasek, and many more. With over USD 100 million raised to date, including our recent Series D, our team is committed to building the best personalized healthcare solutions — and we remain steadfast in our journey to simplify healthcare for all Indonesians.