Deep dives into Angular, RxJS, CSS, tooling, and front-end career growth.

How Angular moved from Zone.js to signals: signal, computed, effect, linkedSignal, resource, rxResource, httpResource, plus zoneless by default in Angular 21.

YouTube video by NG Poland Conf

An Angular low-level and signal-based API for mutations. - ngsignal/mutation

Angular has signals now - and as of 19.2, even a signal-based way to fetch: httpResource, built on...

We are pleased to announce the latest major version of the NgRx framework, featuring exciting new features, bug fixes, and other updates. ## Resource Extensions 🧩 Angular's `resource` and `httpResource` APIs cover a large part of async state management, but two very common requirements are not configurable at the resource level: * **Value on loading:** when a resource reloads, `value()` resets to `undefined` until the new data arrives. * **Value on error:** when a resource enters the error state, reading `value()` throws. The new `@ngrx/signals/resource` entry point addresses both cases with **resource extensions** : a set of utilities for customizing the behavior of a `Resource` in a composable, reusable way. They wrap an existing resource and patch only the parts of its behavior that should change, while fully preserving the original resource type. The `extendResource` function accepts the resource as the first argument, followed by the extensions to apply: import { Component } from '@angular/core'; import { httpResource } from '@angular/common/http'; import { extendResource, withPreviousValueOnLoading, withValueOnError, } from '@ngrx/signals/resource'; @Component({ /* ... */ }) export class TodoList { // type: HttpResourceRef<Todo[] | undefined> readonly todosResource = extendResource( httpResource<Todo[]>(() => '/api/todos'), withPreviousValueOnLoading(), withValueOnError(undefined) ); } The returned resource is still the exact resource that was passed in, so no access is lost to the APIs of more specific resource types, such as `WritableResource`. Only `value()` behaves differently: it keeps the previously loaded todos while a reload is in flight, and returns `undefined` instead of throwing when the request fails. ### Built-in Extensions There are four built-in extensions: * `withPreviousValueOnLoading` keeps the last resolved value while the resource is reloading, which is exactly what paginated and filtered lists need to avoid flickering. * `withValueOnLoading` returns a specific fallback value while the resource is loading. * `withPreviousValueOnError` returns the last successfully resolved value when the resource enters the error state. * `withValueOnError` returns a specific fallback value when the resource enters the error state. ### Registering Global Extensions Most applications want the same loading and error behavior everywhere. The `provideResourceExtensions` function registers extensions for a given injector scope, which can be the application, a route, or a component: import { bootstrapApplication } from '@angular/platform-browser'; import { provideResourceExtensions, withValueOnError, } from '@ngrx/signals/resource'; bootstrapApplication(App, { providers: [provideResourceExtensions(withValueOnError(undefined))], }); With global extensions in place, passing the resource alone to `extendResource` is enough to apply them: @Component({ /* ... */ }) export class TodoList { // Global extensions are applied automatically. readonly todosResource = extendResource( httpResource<Todo[]>(() => '/api/todos') ); } Since `provideResourceExtensions` composes with extensions registered by parent injectors, defaults can be set once at the application level and refined per route or per component. > 💡 The APIs from `@ngrx/signals/resource` are currently marked as experimental. Learn more in the Resource Extensions guide. ## Dynamic Deep Signals 🧬 One of the best parts of `signalState` and SignalStore is that nested state is exposed as deeply nested signals, so a single state slice can be consumed at exactly the granularity a template needs. Until now, that only worked when the type of the slice was a plain object. As soon as a union entered the picture, which is the natural way to model "not loaded yet" or a discriminated result, the whole slice collapsed into a single flat `Signal`. In v22, deep signals are created dynamically. Every object literal member of a union gets its own `DeepSignal`, while the remaining members (primitives, dynamic records, and so on) stay a regular `Signal`. Narrowing the union with a plain `in` check gives access to the nested signals: import { signalStore, withState } from '@ngrx/signals'; type Book = { id: number; title: string }; type Status = | { type: 'success'; data: string } | { type: 'error'; message: string }; const BookStore = signalStore( withState<{ book: Book | null; status: Status }>({ book: null, status: { type: 'success', data: '' }, }) ); const store = inject(BookStore); // 👇 object literal + null: store.book is DeepSignal<Book> | Signal<null> if ('title' in store.book) { const title = store.book.title; // Signal<string> console.log(title()); } // 👇 union of object literals: a DeepSignal is created for each member // store.status: DeepSignal<{ type: 'success'; data: string }> // | DeepSignal<{ type: 'error'; message: string }> if ('message' in store.status) { const message = store.status.message; // Signal<string> console.log(message()); } `signalState` slices and `deepComputed` results behave the same way, which makes discriminated results a pleasure to work with. Generic custom SignalStore features benefit as well: a slice typed as `Entity | null`, where `Entity` is a generic parameter, is now exposed as `DeepSignalOf<Entity | null>` instead of a flat `Signal`, so features written against generic state keep the same deep access their concrete counterparts have. > 💡 Learn more in the SignalState, SignalStore, and DeepComputed guides. ## SignalStoreFeatureType ♻️ Custom SignalStore features that build on top of other features have always needed their input type spelled out by hand. A feature that reads `isPending` and `error` from `withRequestStatus` had to redeclare both, and every change to `withRequestStatus` meant updating that declaration in every dependent feature. The new `SignalStoreFeatureType` utility extracts the state and members produced by a feature factory, so they can be reused directly as the input type of another feature: // with-request-status.ts import { SignalStoreFeatureType } from '@ngrx/signals'; export function withRequestStatus() { return signalStoreFeature( withState<{ requestStatus: RequestStatus }>({ requestStatus: 'idle' }), withComputed(({ requestStatus }) => ({ isPending: computed(() => requestStatus() === 'pending'), error: computed(() => /* ... */), })) ); } export type RequestStatusFeature = SignalStoreFeatureType< typeof withRequestStatus >; // with-status-message.ts import { signalStoreFeature, type, withComputed } from '@ngrx/signals'; import { RequestStatusFeature } from './with-request-status'; export function withStatusMessage() { return signalStoreFeature( type<RequestStatusFeature>(), withComputed(({ isPending, error }) => ({ statusMessage: computed(() => isPending() ? 'Loading...' : error() ?? 'Ready' ), })) ); } `withStatusMessage` now stays in sync with `withRequestStatus` automatically, and the shape is declared exactly once, in the feature that owns it. > 💡 Learn more in the Custom Store Features guide. ## ESLint v10 Compatibility ✅ The `@ngrx/eslint-plugin` package is now compatible with ESLint v10. The peer dependency range covers `^9.0.0 || ^10.0.0`, so teams can move to the latest ESLint release without waiting on NgRx or pinning an older version. Support for ESLint v8 and the legacy `.eslintrc` config format has been dropped in this release. Only the flat config syntax is supported to register the NgRx plugin. Huge thanks to Roli Bosch for contributing the ESLint v10 compatibility! ## A Light Theme for the Docs ☀️ Last year's v21 release brought a completely redesigned website. This year it learned a second look. The NgRx documentation site now ships with a **light theme** alongside the original dark one, and a theme toggle in the top left to switch between them. The selected theme is persisted, and the site respects the operating system preference on first visit. Every part of the site was converted to CSS custom properties for this, from the code highlighting theme and API reference symbols down to the contributor cards and version navigation, so both themes are first-class rather than one being a filtered version of the other. Huge thanks to Adam Almounayar for designing and implementing the light theme! The theme work continued after the initial release with a round of accessibility refinements across both themes: recalibrated accent and text colors that meet WCAG AA contrast on tinted backgrounds, a dedicated syntax highlighting theme per color scheme, visible keyboard focus indicators, and support for `prefers-reduced-motion`. If you have not visited the docs in a while, take a look and try the toggle in the top left. ## Other Improvements 👌 This release also includes a number of smaller enhancements: * **`@ngrx/store-devtools`** has a new `actionCreators` config option, which makes action creators available in the Redux DevTools dispatcher so actions can be dispatched manually from the extension. It accepts an array of action creators or an object, including the result of `createActionGroup`. * **`@ngrx/entity`** now infers the `selectId` return type from the adapter configuration, so it resolves to `string` or `number` instead of `string | number`. The `EntitySelectors` and `MemoizedEntitySelectors` types are also exported now. * Schematics for `@ngrx/data`, `@ngrx/effects`, and `@ngrx/component-store` generate code that uses the `inject` function instead of constructor injection. ## Deprecations and Breaking Changes 💥 This release contains bug fixes, deprecations, and breaking changes. For most of these, we've provided a migration that automatically runs when you upgrade your application to the latest version. Take a look at the version 22 migration guide for complete information regarding migrating to the latest release. The complete CHANGELOG can be found in our GitHub repository. ## Upgrading to NgRx 22 🚀 To start using NgRx 22, make sure to have the following minimum versions installed: * Angular version 22.x * Angular CLI version 22.x * TypeScript version 6.0.x * RxJS version ^6.5.x or ^7.5.x NgRx supports using the Angular CLI `ng update` command to update your NgRx packages. To update your packages to the latest version, run the command: ng update @ngrx/store@22 If your project uses `@ngrx/signals`, but not `@ngrx/store`, run the following command: ng update @ngrx/signals@22 ## Thanks to All Our Contributors and Sponsors! 🏆 NgRx continues to be a community-driven project. Design, development, documentation, and testing are all done with the help of the community. We would like to thank the contributors who helped work towards this release of NgRx: Adam Almounayar, Arul Cornelious, bouclem, David Shortman, Denis Balan, Exequiel Ceasar Navarrete, Guillaume Turri, jase88, Julien Michel, oliv37, robert-md-or, Roli Bosch, Santosh Yadav, saudademjj, Thilo Aschebrock, Tomas Rimkus, Tummas Joensen, and zakaria-bali. If you are interested in contributing, visit our GitHub page and look through our open issues, some marked specifically for new contributors. We also have active GitHub discussions for new features and enhancements. We want to give a big thanks to our longtime Gold sponsor, Nx! Nx is the build system and monorepo tooling that powers the NgRx repository itself, and has been a longtime promoter of NgRx as a tool for building Angular applications. We are also happy to announce our new Gold sponsor, CodeRabbit! CodeRabbit is an AI-powered code review tool that gives teams line-by-line feedback on every pull request. Lastly, we want to thank our individual sponsors who have donated once or monthly. ## Sponsor NgRx 🤝 If you are interested in sponsoring the continued development of NgRx, please visit our GitHub Sponsors page for different sponsorship options, or contact us directly to discuss other sponsorship opportunities. Follow us on X and LinkedIn for the latest updates about the NgRx platform.

Fantastic new APIs are coming to Angular. Two years ago, we proposed making Angular a reactive web framework powered by signals. Since…

My Angular course: https://angularstart.com/ WebAssembly gives us the ability to write code for the web in an assembly-like language that can be executed with near native performance. In this video we take a look at how to set up a basic process for compiling Web Assembly Text format code to WASM and then using it in a JavaScript application. Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076 My game dev channel: https://www.youtube.com/@joshmoronypixels MY GEAR: Keyboard: https://adm42.dev/?ref=3 Neovim setup: https://github.com/joshuamorony/lazyvim/ Animations: https://motioncanvas.io/ 0:00 WASM vs JS? 1:04 Computationally expensive tasks 1:40 Web Assembly Text format 2:21 Using WASM in JS #angular #webassembly #wasm - More tutorials: https://modernangular.com

Curious about the new httpResource API? Well check out this short video for a quick introduction to this new API. Update to Angular 19.2 to get started. Angular Blog about httpResource: https://blog.angular.dev/build-ai-powered-apps-with-genkit-and-angular-707db8918c3a

Photo by Jamie Street on Unsplash Fantastic new APIs are coming to Angular. Two years ago, we proposed making Angular a reactive web framework powered by signals. Since then, the team has shipped a number of signal-based features in the framework: reactive primitives like signal & computed, reactive inputs including model, signal queries, bidirectional RxJS conversion utilities, and migration tooling. We have a solid foundation for reactivity in Angular. Now, we’re ready to begin the next phase of the reactivity journey: the world of asynchronous state. In v19 we shipped the experimental resource() API for developers to try out in advance of the dedicated RFC. The resource API makes it possible to expose results of asynchronous operations as signals. For most applications, developers make HTTP requests for the data their applications need. We recognize this and have built a new API to help facilitate this primary use case — introducing httpResource 🎉.HttpResource httpResource is built on top of the resource primitive and uses HttpClient as loader. It acts as a frontend for @angular/common/http. It makes HTTP requests through the Angular HTTP stack, including interceptors. As the underlying stack remains the same, testing will rely on the same tools. Here we are defining an httpResource with currentUserId as a reactive parameter.currentUserId = getCurrentUserId(); // returns a signal user = httpResource(() => `/api/user/${currentUserId()}`); // A reactive function as argument By default, an httpResource will perform a GET request and return an unknown typed JSON response. It is important to note that httpResource differs from the HttpClient as it initiates the request eagerly (unlike the HttpClient Observable-based requests which must be subscribed). Like resource, it configures a reactive request. If any of the source signals in the request computation change, a new HTTP request will be made. For more advanced requests, it is possible to define a request object similar to HttpClient‘s request.user = httpResource(() => ({ url: '/api/user/${currentUserId()', method: 'GET', headers: { 'X-Special': 'true', }, params: { 'fast': 'yes', }, reportProgress: true, withCredentials: true, transferCache: true, })); While the resource pattern is meant only for retrieving asynchronous data, httpResource will allow any request method (like POST in the previous example). This still doesn’t mean that you should be using httpResource to change data on the server. For instance, if you need to submit form data, use the HttpClient methods. An httpResource will return and parse the response as JSON but it is possible to use it for other return types. The API has multiple dedicated methods available for other response types:httpResource.text(() => ({ … })); // returns a text in value() httpResource.blob(() => ({ … })); // returns a Blob object in value() httpResource.arrayBuffer(() => ({ … })); // returns an ArrayBuffer in value()Shape of an HttpResource An httpResource , similar to other `resource`, exposes several signals:value() — which contains the result of the http request (when successful) and is programmatically overwritablestatus() — with the status of the resource (idle, loading, error etc)error() — with the request error / parsing errorisLoading() — which is true while the request is pending It also includes dedicated signals for metadata about the response:​​headers() — with the response’s headersstatusCode() — with the response’s status codeprogress() — with the progress of the request (if required in the request object) These new signals streamline the writing of requests by exposing this useful information without requiring a specific argument like for the HttpClient to request the HttpResponse.Embracing the Ecosystem for Type Safety When performing http requests we often want to ensure that the data we receive conforms the shape that we expect. This is commonly known as schema validation. In the JavaScript ecosystem we often reach out for battle-tested libraries like Zod or Valibot for schema validation. The httpResource offers direct integration for those libraries by using the parse parameter. The returned type of this parse function will provide the type to the resource itself, ensuring type safety alongside the schema validation. The following example uses Zod to parse and validate the response from the StarWars API. The resource is then typed the same as the output type of the Zod’s parsing.export class AppComponent { id = signal(1); swPersonResource = httpResource( () => `https://swapi.dev/api/people/${this.id()}`, { parse: starWarsPersonSchema.parse } ); } const starWarsPersonSchema = z.object({ name: z.string(), height: z.number({ coerce: true }), edited: z.string().datetime(), films: z.array(z.string()), }); Demo on StackblitzExperimental API The httpResource is available as a part of the Angular v19.2 release. This is an experimental API and is not ready for production because the shape of this API can still change before it is promoted to stable. With that in mind, we would love for you to try out the API and let us know what you think. You can learn more about this API, resource and more in the RFC on GitHub. Thank you for being a part of the Angular community and we look forward to continuing the reactivity journey together. Happy coding! Seamless data fetching with httpResource was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Fantastic new APIs are coming to Angular. Two years ago, we proposed making Angular a reactive web framework powered by signals. Since…

And we’re back with Angular’s latest minor release, version 19.2, bringing new APIs and experimental features to empower developers on their next great app.Expanding reactivity beyond synchronous In Angular v19 we released the experimental resource API, continuing our reactivity story to a new chapter — asynchronous reactivity. With this release, we’re thrilled to introduce two significant updates: asynchronous reactivity with the new httpResource and resource streaming with rxResource APIs. Developers have been able to use signals for synchronous state in Angular since their introduction in Angular v16. At the same time developers have been curious as to how they can leverage the power, readability and maintainability of signals for asynchronous dependencies. The resource API makes it possible to interact with asynchronous data sources while leveraging the developer experience and ergonomics of signals. The resource API is a foundational building block for incorporating asynchronous actions like data fetching in Angular. Here’s an example of how you can use resourcein your application:/* component.ts */ readonly id = signal(1); readonly todoResource = resource({ request: ()=> ({id: this.id()}), loader: async ({request}) => (await fetch( `https://jsonplaceholder.typicode.com/todos/${request.id}`)).json(), }); /* component.html */ <p>{{ todoResource.value() }}</p> If the id value updates, the loader reactively triggers the defined asynchronous operation again. Then, in the template for the component, the current value can be accessed via .value(). While this API is helpful, one might naturally conclude that they should use this API to fetch data asynchronously. Thanks to Mattieu Rigler for his helpful contributions, we now have another great new API for you to try out: httpResource Used for fetching data, the experimental httpResource API creates a low friction reactive way to fetch data over HTTP. httpResource participates in Angular’s reactivity system with signals. Here’s an example of using it in action:// returns a signal currentUserId = getCurrentUserId(); // A reactive function as argument user = httpResource(() => `/api/user/${currentUserId()}`); Here, httpResource reacts to changes in the signal currentUserId. When currentUserId updates, httpResource triggers a new asynchronous request. Because the API leverages HttpClientit gives you access to features such as interceptors. While we’re on the topic of asynchronous requests there’s one more update that we think you’ll really enjoy. We’ve added support for streaming multiple responses using the rxResource API. Check out this example:/* component.ts Using a BehaviorSubject and an setInterval to create a stream of values that generates a new value every 1000ms */ readonly subject = new BehaviorSubject<number>(1); readonly intervalId = setInterval(() => { this.subject.next(this.subject.value + 1); }, 1000); /* rxResource will stream values as they arrive */ readonly resource = rxResource({ loader: () => this.subject, }); /* component.html Display the latest values that have been returned */ <section> <p>{{ resource.value() }}</p> </section> This could be helpful in scenarios where you are connecting to an endpoint that returns multiple values. These new APIs are still under development and what’s great is that there’s a new RFC (request for comments) for the resource API available for you to share your thoughts and help us shape this new API.Better template ergonomics and more The Angular template authoring experience just keeps improving. Angular templates now support untagged template literal expressions, making string concatenation and escaping single or double quote strings easier. For example, it’s less cumbersome to dynamically interpolate a value from your class into your template. Check out this example:<div [class]="`layout col-${colWidth}`"></div> This improved experience makes interpolating values even smoother. This isn’t the only update we’re launching in Angular v19.2 — there are new migrations such as being able to migrate to convert to self closing tags (thanks eneajaho!), supporting the Set type in forms, adding skip hydration diagnostic and so much more. If you’d like to see even more updates from Angular v19.2, be sure to check out the change log on GitHub.Get the latest and greatest from Angular today Angular v19.2 is ready for your applications today so go ahead, update and go build great apps. New to Angular? Check out angular.dev/tutorials to start building with Angular today. Author Mark (Techson) Thompson Angular 19.2 Is Now Available was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

My Angular course: https://angularstart.com/ There is an experimental new API in the 19.2 RC: httpResource - it is essentially a specialised version of resource for fetching data from HTTP endpoints with signals. But that's not what has got me excited. The part I've found more interesting is the ability for resources to now stream updates over time. Problems with using signals to represent events: https://www.youtube.com/watch?v=Jv9RO9bR5Gw Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076 My game dev channel: https://www.youtube.com/@joshmoronypixels MY GEAR: Keyboard: https://adm42.dev/?ref=3 Neovim setup: https://github.com/joshuamorony/lazyvim/ Animations: https://motioncanvas.io/ 0:00 httpResource 1:15 The problem with rxResource 2:55 Streaming resources 4:53 Experimental patterns #angular #rxjs #signals - More tutorials: https://modernangular.com