Angular 20 Signals: The Simpler Way to Reactivity

With Angular 20, Signals are no longer just an experiment; they’re becoming the core of Angular’s reactivity. Introduced in Angular 16, Signals simplify state management and make updates faster, cleaner, and easier to track. The latest release stabilizes key APIs like effect(), toSignal(), and toObservable(), marking a big step toward a zoneless, high-performance Angular future. Wondering how Signals compare to RxJS and why they matter? Let’s dive in.

In this blog, we’ll explore:

• What are signals?
• Key features of signals.
• The problem signals solve (Why angular introduced them).
• How to use signals with angular.
• Types of signals in angular.
• Tracking signal changes (effect()).
• Real-world example (Counter).
• Replacing @Input() and @Output() with model().
• Exploring signal-based forms.
• Using signals with HttpResource API.
   

🔍What are Signals?

• Signals are a new way in Angular to track and manage reactive data in your application. They serve a similar purpose to @Input(), @Output(), RxJS, or ngModel, but are simpler, more predictable, and faster.
   

• Signals are designed for high performance by offering a direct and explicit mechanism for change detection. When a Signal’s value changes, only the components or expressions that depend on it are reevaluated, making updates efficient and reducing unnecessary rerenders especially in large or complex applications.
   

🔑 Key features of Signals

• 💡Simple APIs: `signal()`, `set()`, `update()`.
• ⚡Automatic DOM updates without manual subscriptions.
• 🧠Precise reactivity (only re-renders where needed).
• 🔧Works without the complexity of RxJS (but can compatible with it).

🧩The problem Signals solve

Traditionally, Angular's change detection mechanism, often powered by Zone.js, could recheck entire component trees for changes. While efficient for many scenarios, this checking could sometimes lead to unnecessary computations and rerenders, especially in large applications with frequent data updates. Below are some points that Signals solve.

• Improved Performance: Less rerendering, faster updates.
• Better Debuggability: It's much easier to see why and what changed in app, simplifying troubleshooting. You know exactly which signal caused an update.
• Simplified Code & State Management: Signals offers simple and more direct way for manage data within components, In many cases, you can achieve same reactive behavior with less code.

🛠️ How to use Signals in Angular
Step 1: Import the signal function from Angular core:

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

Step 2: Declare your reactive variable: Always add “()” at the end.

let count = signal(0);

Step 3: Use it in your component or template:

HTML: {{ count() }}

Step 4: Update Or Change the value:

count.update(currentValue => currentValue + 1); or count.set(count() + 1);

• To work with Angular Signals, you first declare them, and then to read their current value, you simply call them like a function (e.g., mySignal()) and whenever value or state changes, automatic updates are done by the signal, so there is no need to worry about that. For changing a signal's value, especially when modifying it based on its current state, it's best practice to use mySignal.update(value => value + 1) instead of mySignal.set(mySignal() + 1).

🔍 Types of Signals in Angular

• Angular provides two different kinds of signals to handle state in a reactive way.
   

✅ Simple Signal

• A simple signal holds a value that you can read, set or update manually. It’s like a reactive variable.

Example:

const counter = signal(0); counter(); // returns 0 counter.set(5); // updates value to 5 counter(); // returns 5

• Use this when you need basic state that might change based on user actions or other logic.
   

🧠 Computed Signal

• A computed signal has its value from other signals(dependencies). It updates automatically when the Signals(dependencies) change.

Example:

const count = signal(2);
const doubled = computed(() => count() * 2);

count.set(4); doubled(); // returns 8

• Use this to create values which are based on other signals (dependencies). No need to manually update the computed signals. Also, note that computed signals are not allowed to be modified directly as signals and variables.
   

🌀Tracking Signal changes with effect()

• We can also react to signal changes using effect(). It lets you run a function automatically whenever a signal value updates. This is good for handling side effects such as logging, tracking analytics, or making API requests, as demonstrated below.
   

🌍 Real-World Example: Counter Component

• Imagine a simple counter in your Angular component. Here’s how you can build it using signals:
   

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

@Component({ 
selector: 'app-counter', 
template: 
`<h1>Counter: {{ count() }}</h1>
<button (click)="increment()">+</button>`
})
export class CounterComponent { 
	count = signal(0);
	constructor() { 
		effect(() => {
			console.log('Updated Count Value:', this.count());
		});
	}
	increment() { this.count.set(this.count() + 1); }
}

When the increment button (+) button is clicked, the increment() function runs and updates the count signal. This triggers Angular to automatically update the DOM wherever count() is used. The effect() function detects this change and runs its logic (like logging), making it easy to handle side effects without manual subscriptions.
 

🔄 Replacing @Input() and @Output() with model()

• Angular 17+ introduced the `model()` function, and with Angular 20 and Signals, it's becoming the new, cleaner way to share data between parent and child components. Instead of using `@Input()` and `@Output()`,we can now bind signals directly across components using `model()`.
• Why is this powerful? It simplifies communication: no more need to manually emit events or track separate input values.

Example:

// Parent component 
@Component({ 
selector: 'app-parent',
template: `<app-child [userName]="name"></app-child>`
})
export class ParentComponent { 
	name = signal('Angular');
}

// Child component 
@Component({ 
selector: 'app-child',
template: `<input [value]="model()" (input)="model.set($event.target.value)" placeholder="Enter your Name" />`
})
export class ChildComponent { 
	userName = model<string>();
}

Now, when changes made in the child component, they are reflected immediately in the parent signal, and vice versa. This is two-way binding made easy, with less code and more clarity.

⚡Exploring signal-based form:

 In Angular 20 introduces an exciting new direction for forms: Signal-Based Forms (currently in developer preview). This experimental API aims to fundamentally change how we build and manage forms, leveraging the precise reactivity of Signals. Traditionally, Angular forms rely heavily on RxJS or imperative updates, but Signal-based forms promise a more reactive and declarative approach.

Key aspects and benefits include:

• Direct Signal Integration: Form controls and groups will expose their values and states (value, valid, touched) as Signals, allowing for precise, signal-driven updates in your templates and component logic.
• Reduced Boilerplate: By aligning form state with Signals, developers can potentially write less code for common form operations, validation, and complex interactions.
• Enhanced Performance: With fine-grained reactivity, only the necessary parts of your form or UI that depend on a specific Signal value will update, leading to performance improvements.
• Declarative Approach: It encourages a more declarative way to define and manage form logic, making forms easier to understand, test, and maintain.

• Note: it’s still in preview (In Angular 20), this feature is a significant step towards a fully signal-driven Angular experience, offering a more modern and efficient way to handle user input.

🌐 Using Signals with HttpResource API

Introduced in Angular 19, HttpResource continues to be a powerful API in Angular 20, designed to simplify handling HTTP requests reactively using Signals.

Key Highlights:

• Eager by Default: The request is fired immediately as soon as the resource is created.
• Full Request Object: You pass a full request config (method, headers, body), instead of just a URL string.
• Computed-like Behavior: Works like a computed signal internally, so any change in it's input automatically re-fetches.
• Reactive Helpers: Access `.isLoading()`, `.error()`, and `.value()` to manage loading states, errors, and responses directly in your template.

Benefits:

• Reactive updates
• Less boilerplate
• Improved responsiveness
• Type safety and input validation

Example:

// In TS file

import { signal } from '@angular/core';
import {httpResource } from '@angular/common/http';

let searchString = signal('Angular');

const userResource = httpResource(()=> ({
url: ‘api/search_path’, method: “POST’,
header: “{ ‘X-Custome-Header’: ‘angularSignals’ }”
body: { query: searchString() },
….
}))

// In Html File

@if (!!userResource.isLoading()){
	<div> Show loader …. </div>
}

@ if ((!!userResource.error ()){
	<div> Show error messages {{ userResource.error() }} </div>
}

@ if ((!!userResource.value ()){
	<div> Searched new value, {{ userResource.value()}} </div>
}

✅ Final Thoughts

• In conclusion, Angular 20's Signals truly make reactivity intuitive and straightforward. Whether a small feature or building a large scale application, Signals will significantly reduce complexity in code, while simultaneously boosting performance. For anyone new to Angular or exploring reactive programming, there's no better place to begin than with Signals they are undeniably the future of state management within the framework.