Common Mistakes with Angular Signals

In this tutorial, we will see the most common Angular Signals mistakes and how to fix them.

Introduction

Signals are used to improve performance and simplify state management, but many developers make common mistakes when using them.

What Are Angular Signals?

Signals are a reactive state management feature that automatically updates the UI when the value changes.

Example: create count variable through signal


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

count = signal(0);

Show count variable in Template:


{{ count() }}

How many Common Angular Signals Mistakes?

There are many common Angular Signals Mistakes

Mistake Problem Solution
Forgetting to call signal as a function Value will not be displayed Use count() instead of count
Updating signal incorrectly Value will not change Use set() or update()
Using signals for complex async streams Hard to manage async logic Use RxJS Observables
Overusing effect() Performance issues Use computed() where possible
Mutating objects inside signals Angular may not detect changes Use immutable updates

Mistake 1: Forgetting to Call Signal as a Function

Sometimes, many developers try to use signals like normal variables instead of a function.

Incorrect:


{{ count }}

Correct:


{{ count() }}

Note: Signals must always be called as functions.

Mistake 2: Updating the Signal in the Wrong Way

Signals cannot be updated by direct assignment.

Incorrect way:


count = 10;

Correct way:


count.set(10);

OR (You can also use update)


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

Mistake 3: Using Signals for Complex Async Logic

RxJS is better for async stream logic, so you should not use Signals for this.

Bad practice:

If you are using signals for API streams or event streams.

Better approach:

If you are using Observables for async logic and Signals for UI state.

Mistake 4: Mutating Objects Inside Signals

Signals detect reference changes, not deep object mutations.

Incorrect way:


user().name = "John";

Correct way:


user.set({
  ...user(),
  name: "John"
});

Conclusion

Signals are a powerful feature in reactive state management. However, understanding common mistakes can help you avoid bugs and performance issues.