Signals in Angular 17! Wow



This content originally appeared on DEV Community and was authored by Ahmad Alhafi

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


This content originally appeared on DEV Community and was authored by Ahmad Alhafi