We’ve reached the last episode of 2024—and the festive period has been packed with activity! Covering everything from Observable Standardization to Signal-based Forms, Router integration in DevTools, and much more.
Observables Standardization
Work is underway to turn Observables—and possibly Signals—into official Web Standards. Dominic Farolino, who heads the effort, gave a demo at TechStackNation covering both the current state and the roadmap.
The standardized version won’t line up perfectly with RxJS Observables. A few key deviations:
- The spec’s Observable could be hot, which is akin to behavior of the
shareoperator, with multicasting built in. - To cancel, you’d rely on the AbortSignal—just like the
fetchAPI—rather than callingunsubscribe. - Certain implementations might hand back a Promise when the stream wraps up.
The Angular team’s Alex Rickabaugh and Pawel Kozlowski joined Dominic for a follow-up, zeroing in on the Observables vs. Signals debate.
Rickabaugh pointed out that Observables deal with discrete events at specific moments, whereas Signals embody state that persists and is always accessible. He also observed that BehaviorSubject—since it actually stores state—doesn’t fit the eventing model and likely won’t show up in the standard.
WICG
/
observable
Observable API proposal
Observable
This is the explainer for the Observable API proposal for more ergonomic and composable event handling.
Introduction
EventTarget integration
This proposal adds a .when() method to EventTarget that becomes a better
addEventListener(); specifically it returns a new
Observable that adds a new event listener to the target
when its subscribe() method is called. The Observable calls the subscriber's
next() handler with each event.
Observables turn event handling, filtering, and termination, into an explicit, declarative flow
that's easier to understand and
compose
than today's imperative version, which often requires nested calls to addEventListener() and
hard-to-follow callback chains.
Example 1
// Filtering and mapping:
element
.when('click')
.filter((e) => e.target.matches('.foo'))
.map((e) => ({ x: e.clientX, y: e.clientY }))
.…State of JavaScript 2024
The findings from the State of JavaScript 2024 survey have been published, and Angular's showing was solid:
- Adoption climbed from 45% to 50%.
- Favorable perception also went up.
- Yet, enthusiasm fell from 23% to 17% — maybe React lovers haven't caught wind of Incremental Hydration yet 😅!
Liquid error: internal
NgRx 19
Version 19 of NgRx, Angular's leading state management solution, has been rolled out. Key features include:
- The Global Store can now trigger action dispatches in response to Signal changes.
- The SignalStore now supports augmenting its class with new properties on the fly.
Signal Forms - First Git Branch
For many Angular apps, forms are indispensable, and developers are keenly waiting for an official Signal-based approach.
A new branch has been published, but as Angular team member Matthieu Riegler pointed out, this remains a preliminary prototype stage. Plenty of modifications are likely before an RFC is drafted.
Router DevTools
Angular DevTools has added router insights as of Angular 19.0.5. This new capability lets you identify routes that are lazy-loaded, eagerly loaded, or presently active.
Rx Virtual View
While virtual scrolling is typically applied to lists for performance gains, RxVirtualView brings this pattern to any target element.
Non-visible areas are substituted with placeholders via the IntersectionObserver, and actual views are rendered only as they enter the visible area.
This directive is included in the rx-angular/template v19.1 release.