DEV Community: Ahmad Alhafi

Angular 19 — What’s up with Signals?

Ahmad Alhafi — Tue, 26 Aug 2025 19:47:19 +0000

The Signals that were Developer Preview in Angular v17 are now stable 🙂‍↕️

These include the view/content queries (viewChild, viewChildren, contentChild, contentChildren) and also output.
If you want a refresher on them, check out this post:
https://lnkd.in/dN_kPEhu

What’s new in Angular 19?

🎗 linkedSignal()

Remember computed() signals? linkedSignal() works similarly, but it’s writable.

It derives its value from another signal

You can also manually update it anytime you want

Example:

const count = linkedSignal(() => list().length);
count.set(0); // You can manually set it now, even though it’s derived

The next three signals are designed for reactive handling of async data, providing signals for loading, error, and value states.

🎗 resource()

A reactive API for managing async data (HTTP calls, loading, etc).

Provides loading, error, and value states as Signals

Supports reload and abort unnecessary operations (abortSignal)

Usage:

things.value();
things.error();
things.loading();

🎗 httpResource()

A specialized version of resource() for HTTP requests using Angular HttpClient.
Instead of building a resource from scratch:

const things = httpResource({
request: () => this.http.get('/api/things'),
});

Access states the same way:

things.value();
things.error();
things.loading();

🎗 rxResource()

For when you want to keep using RxJS Observables within Signals.
Instead of manually converting an Observable to a Signal (toSignal()), it wraps it automatically.

things.value();
things.error();
things.loading();

🐧 Quick comparison

resource() → base API, you can build any resource (not just HTTP)

httpResource() → ready-to-use specialization for HTTP requests using Angular HttpClient

rxResource() → specialization for RxJS Observables to work seamlessly in the Signals ecosystem

⚠️ All these new Signals in Angular 19 are Developer Preview.

And that’s it!
If you’re still unsure how it works, check out this post:
https://lnkd.in/dvFG2P3d

Signals in Angular 18 🔞, Signals cool upgrade

Ahmad Alhafi — Tue, 26 Aug 2025 19:44:31 +0000

She just turned 18, officially of age… now she’s grown 💪🏻

With Angular 18, we can finally escape zone.js!
Applications can now run without zone.js using zoneless change detection, and updates are fully controlled via Signals.

🦧 How to make your Angular 18 app zoneless

Remove zone.js from polyfills Open angular.json and remove the "zone.js" line:

"polyfills": [
// "zone.js" <- remove this line
]

Enable Zoneless Change Detection Add provideZonelessChangeDetection to the providers in your main.ts:

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

bootstrapApplication(AppComponent, {
providers: [provideZonelessChangeDetection()],
});

Use Signals or ChangeDetectorRef for updates Without zone.js, any UI updates must be triggered either via Signals or manually using ChangeDetectorRef.

No new Signals were added here, but the key takeaway is: we’re finally free from zone.js 😋

If you’re still unsure how it works, check out this post:
https://lnkd.in/dvFG2P3d

Signals in Angular 17! Wow

Ahmad Alhafi — Tue, 26 Aug 2025 19:40:50 +0000

What changed? ☕️

Well, as of this version, signal, effect, and computed are now stable and have officially graduated from Developer Preview ✨

Plus, several new types of Signals hit the stage—some stable, some still in Developer Preview.

🟢 Stable Signals

🎗 input()

Works like @Input—used to pass data from parent to child components.
The difference? It’s Reactive by design, so you don’t need lifecycle hooks like ngOnChanges to track changes.

🎗 model()

Supports two-way binding natively with Signals.
Why use it? You can bind a value inside a child component directly to the parent, keeping changes in sync both ways.
Old equivalent: @Input() + @Output() + EventEmitter (for [(ngModel)] or [(value)]).
Honestly… a huge improvement ☕️

🟠 Developer Preview Signals

🎗 output()

Works like @Output—used to emit data from child components or notify the parent.
Reactive by design, so no lifecycle hooks like ngOnChanges are needed.

🎗 viewChild() & viewChildren()

Equivalent to the old @ViewChild and @ViewChildren.
They access the first matching element / all matching elements inside the same template.
The difference? They’re native reactive, so any changes or reinitializations are reflected immediately.
Simpler code, no need for AfterViewInit to track changes.

🎗 contentChild() & contentChildren()

Access the first/all projected elements from the parent ().
Old equivalent: @ContentChild and @ContentChildren.
Difference? The new ones are reactive, so any change in projected content appears immediately—no need for AfterContentInit or AfterContentChecked.

The last four Signals are called Signal Queries.
If you want to read more, check the official docs:
https://lnkd.in/dK3p8wAk

Signals in Angular 16, Signals beginning

Ahmad Alhafi — Tue, 26 Aug 2025 19:37:31 +0000

Sure, it’s a bit rudimentary, but honestly, I like it 🪵

Alright, let’s dive into the core types of Signals in their first version, v16:

🎗 signal()

Stores a reactive, writable value.

A bit funny when we mix Arabic terms with programming, but here’s the explanation:
It’s a value you can store and update, and it’s reactive—so whenever it changes, anywhere you use it (in HTML or code) updates automatically.

You can update the value in two ways:

signal.update() → modifies the value based on the previous value

signal.set() → sets a new value directly, without relying on the old value

🎗 computed()

A value derived from an existing signal, reactive but read-only.

It depends on other signals in your code and cannot be modified directly using set() or update().
You can use it just like a signal, both in templates and in code.

🎗 effect()

Executes a side effect whenever a dependent signal changes.

For example, in the image, when the count signal changes, it automatically logs a value to the console.

Important note: In v16, Signals are still in Developer Preview / PoC stage.
That means it’s proof that the solution works and can solve specific problems, but we’re still using zone.js under the hood.

And that’s it!

If you’re still unclear about how it works, check out this post:
https://lnkd.in/dvFG2P3d

Why and What? Signals in Angular!

Ahmad Alhafi — Tue, 26 Aug 2025 19:32:24 +0000

Because Angular, my friends, is Angular, and because it’s a Framework, not just a library, I felt it wasn’t great to rely on external stuff for state management… so they created Signals 🦧

Let’s take a step back before diving into Signals.

Angular used to rely on a mechanism called Dirty Checking, using the well-known library zone.js to track changes.

So, what was the problem?
Even if you changed a tiny value, Angular would check all components to see if anything changed—even when it wasn’t necessary 🦧

This meant a lot of unnecessary updates and poorer performance.

That’s where Signals come in.

Signals gradually eliminate zone.js and move Angular to Fine-Grained Reactivity, which is exactly how Signals work.
The idea is to make everything reactive in a smarter way:
🔫 If a value changes, only the part of the UI related to that value updates—no more scanning everything like before.

It’s important to know that Signals are basically an implementation of the Observer Design Pattern inside Angular.
Simply put:

You have Observables (the values)

And Observers (the UI pieces or code that care about those values)

As soon as the value changes, all relevant Observers are notified directly and update themselves immediately.
So instead of Angular checking the whole project asking “who changed what?”, the info goes straight to the Observers—who are chilling with a coffee ☕️.

That’s Signals in a nutshell!
If any term feels unclear, drop a comment and we’ll chat 😋

If you want a deeper dive on what it actually does, check out this post:
https://lnkd.in/dvFG2P3d