DEV Community: NgRx

Announcing NgRx 21: Celebrating a 10 Year Journey with a fresh new look and @ngrx/signals/events

Tim Deschryver — Mon, 22 Dec 2025 08:59:27 +0000

We are pleased to announce the latest major version of the NgRx framework with some exciting new features, bug fixes, and other updates.

10 Year Anniversary 🎉

Ten years ago, NgRx started as a small experiment created by Rob Wormald, Mike Ryan, and Brandon Roberts to bring Redux-style state management to Angular applications. Since then, Angular has changed a lot, our tooling has changed a lot, and the way we build applications has changed a lot – but NgRx is still the go-to solution many of us reach for managing state in Angular.

Over the years, NgRx has grown from @ngrx/store into a full platform: router integration, entity helpers, devtools, component utilities, ESLint rules, and most recently Signals.

Huge thanks to Alex Okrushko, Brandon Roberts, Marko Stanimirović, Mike Ryan, Rainer Hahnekamp, Tim Deschryver, everyone who has been on the team along the way, and the many contributors. Equally important are the countless content creators who helped the rest of us learn how to use these tools well.

If you have used NgRx in the last decade, you’re part of that story. Thank you. 🙏

Some key-numbers to highlight teams are confident that NgRx brings value when building quality production-ready applications throughout these years:

483 contributors
2.250 commits
2.400 issues closed
@ngrx/store has been downloaded 174.070.253 times
@ngrx/signals has been downloaded 14.665.960 times

New Website 🎨

To celebrate this milestone we’re shipping a refreshed website at https://ngrx.io.

The new site is build with Analog and has a modernized look and feel, improved navigation, and better performance. We're also looking to update the docs and examples to make it easier to find what you need, whether you're just getting started or looking for advanced patterns.

A huge shout-out to Mike Ryan for the new design and setup for the new website, and to Brandon Roberts, Duško Perić, and Tim Deschryver for the content migration and improvements.

Welcome Rainer 🏆

We are thrilled to welcome Rainer to the NgRx core team! Rainer has been an active member of the NgRx community for years, from giving talks and workshops at conferences and meet-ups, to contributing code, documentation, and support to fellow developers. His expertise and passion for Angular and NgRx make him a valuable addition to our team. Please join us in welcoming Rainer to the NgRx family!

The Events Plugin is stable 👏

In NgRx 19 we introduced @ngrx/signals/events as an experimental way to model event-driven workflows in your Angular applications using Signals and Signal Stores.

Thanks to your feedback the APIs have been cleaned up and the rough edges have been sanded down. This makes us confident to promote the Events plugin to stable in this release.

If you want to explore how to use Events plugin in your app, check out the Events documentation.

The addition of Scoped Events

The most important addition is support for scoped events. Instead of broadcasting every event globally, you can scope events to a specific part of your app – the local scope, parent scope, or the global scope. Typical examples include local state management scenarios where events should stay within a specific feature, or micro-frontend architectures where each remote module needs its own isolated event scope.

import { provideDispatcher } from '@ngrx/signals/events';

@Component({
  providers: [
    // 👇 Provide local `Dispatcher` and `Events` services
    // at the `BookSearch` injector level.
    provideDispatcher(),
    BookSearchStore,
  ],
})
export class BookSearch {
  readonly store = inject(BookSearchStore);
  readonly dispatch = injectDispatch(bookSearchEvents);

  constructor() {
    // 👇 Dispatch event to the local scope.
    this.dispatch.opened();
  }

  changeQuery(query: string): void {
    // 👇 Dispatch event to the parent scope.
    this.dispatch({ scope: 'parent' }).queryChanged(query);
  }

  triggerRefresh(): void {
    // 👇 Dispatch event to the global scope.
    this.dispatch({ scope: 'global' }).refreshTriggered();
  }
}

To learn more about scoped events, check out the scoped events documentation.

`signalMethod` and `rxMethod` accept a computation method

In addition to providing a Signal, it is also possible to provide a computation function to the methods signalMethod and rxMethod. This is a small change that improves the developer experience, and aligns our API with Angular's resource and linkedSignal methods.

@Component({
  /* ... */
})
export class Numbers {
  readonly logSum = signalMethod<{ a: number; b: number }>(
    ({ a, b }) => console.log(a + b)
  );

  constructor() {
    const num1 = signal(1);
    const num2 = signal(2);
    this.logSum(() => ({ a: num1(), b: num2() }));
    // console output: 3

    setTimeout(() => num1.set(3), 3_000);
    // console output after 3 seconds: 5
  }
}

Special thanks to Rainer and Marko for their incredible work on @ngrx/signals!

Updating to NgRx v21 🚀

To start using NgRx 21, make sure to have the following minimum versions installed:

Angular version 21.x
Angular CLI version 21.x
TypeScript version 5.9.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@21
ng update @ngrx/signals@21

A Big Thank You to Our Community! ❤️

NgRx is a community-driven project, and we are immensely grateful for everyone who contributes their time and expertise. Your bug reports, feature requests, documentation improvements, and pull requests are what make this project thrive.

We want to give a special shout-out to a few individuals for their direct contributions to this release:

Duško Perić for improving the website's design
Exequiel Ceasar Navarrete, Gabriel Guerrero, Julien Michel, and Mateusz Stefańczyk for migrating the test suite to Vitest.
J. Degand for quality of life improvements.

We also want to extend a huge thank you to our sponsors. Your financial support is crucial for the continued development and maintenance of NgRx.
A special thanks to our Gold sponsor, Nx, and our Bronze sponsor, House of Angular.

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.

What's Next?

We are incredibly excited about what you will build with NgRx v21. We encourage you to try out the new features and share your feedback with us. We are especially interested in hearing your thoughts on the new experimental Events plugin. Please open issues and discussions on our GitHub repository to let us know what you think.

To stay up-to-date with the latest news, follow on X / Twitter and LinkedIn.

Thank you for being part of the NgRx community! Happy coding!

Announcing NgRx v20: The Power of Events, Enhanced DX, and a Mature SignalStore!

Alex Okrushko — Mon, 28 Jul 2025 14:04:19 +0000

The NgRx team is thrilled to announce the release of NgRx version 20! This release aligns with the exciting launch of Angular v20 and represents a significant leap forward for state management in the Angular ecosystem. With NgRx v20, we are delivering on our promise to provide a modern, powerful, and developer-friendly set of tools. This version marks a pivotal moment of maturation for @ngrx/signals, transforming it from a promising new library into a full-spectrum state management solution capable of tackling any challenge, from the simplest component state to the most complex enterprise-scale applications.

This release is built on three core themes:

A Modern Take on Flux: We're introducing a powerful, optional, and experimental event-driven architecture with the new Events plugin, bringing the battle-tested patterns of Redux to the world of SignalStore.
Unparalleled Developer Experience (DX): We've focused heavily on making your life easier with major improvements to testing, more powerful entity management, and enhanced tooling to ensure code quality.
Advanced Composition Patterns: We're unlocking new levels of sophistication and reusability with new tools like withFeature and withLinkedState, enabling you to build elegant and scalable state logic.

As always, this release would not be possible without our incredible community. Your feedback, contributions, and passion drive us forward. Thank you for being a part of this journey with us. Now, let's dive into what's new in NgRx v20!

A Modern Take on Flux: The Experimental Events Plugin 🚀

One of the most significant additions in NgRx v20 is the new Events plugin for SignalStore, which is being released in an experimental stage. While the default method-driven approach of SignalStore is lightweight and perfect for many scenarios, we recognize that highly complex applications often benefit from a more decoupled, event-driven architecture.

Inspired by the original Flux architecture, the Events plugin provides an optional layer that brings robust, predictable patterns directly into the SignalStore ecosystem. By dispatching events and reacting to them, you decouple what happened from how the state should change, leading to more maintainable code, especially in scenarios with inter-store communication. This makes SignalStore a "full-spectrum" solution, capable of scaling from a simple service with signals to a complex, event-driven system.

For a deep dive into the plugin's architecture and a comprehensive walkthrough, check out our dedicated blog post:

Marko Stanimirović for NgRx

May 12 '25

Announcing Events Plugin for NgRx SignalStore: A Modern Take on Flux Architecture

#ngrx #angular

Comments 11

6 min read

Method/Command-driven vs. Event-driven SignalStore

To help you decide which pattern to use, here’s a comparison of the "classic" method-driven SignalStore and the new event-driven approach with the Events plugin.

Feature	"Classic" SignalStore (Method/Command-driven)	SignalStore with Events Plugin (Event-driven)
Invocation	Component directly calls a method on the store instance. `store.loadUsers()`	Component dispatches an event. `dispatcher.dispatch(usersPageEvents.opened())`
Coupling	Tightly coupled. The component knows about the store and its specific methods.	Decoupled. The component only knows about the event, not which store(s) will handle it.
State Change	Handled inside the method via `patchState`.	Handled in a `withReducer` block, listening for specific events.
Side Effects	Handled inside the method, often using `rxMethod`.	Handled in a `withEffects` block, listening for specific events.
Use Case	Ideal for local/feature state where the component and store are closely related.	Excels in complex scenarios with inter-store communication or when a fully decoupled architecture is desired.

SignalStore Feature Enhancements

NgRx v20 is packed with new features that refine and extend the power of SignalStore, focusing on developer ergonomics and advanced composition.

Enhanced Entity Management: `prependEntity` and `upsertEntity` 🧩

The @ngrx/signals/entities plugin is already a powerful tool for managing collections of data. In v20, we've added two highly-requested updaters to give you even more fine-grained control.

First, we're excited to introduce prependEntity, a community contribution from Dima Vasylyna. This function allows you to add an entity to the beginning of a collection, a common requirement for UIs like activity feeds, logs, or chat interfaces where the newest items appear at the top. If the entity collection has an entity with the same ID, it is not added and no error is thrown.

import { patchState } from '@ngrx/signals';
import { prependEntity } from '@ngrx/signals/entities';

// Adds the new todo to the start of the `entities` array
patchState(store, prependEntity({ id: 0, text: 'Newest item', completed: false }));

Second, we've added upsertEntity. This powerful updater adds an entity if it doesn't exist or performs a merge update if it does. This is not a full replacement; it only merges the properties you provide, making it highly efficient for partial updates. This simplifies logic that would otherwise require you to first check for an entity's existence before deciding whether to add or update it.

import { patchState } from '@ngrx/signals';
import { upsertEntity } from '@ngrx/signals/entities';

// If entity with id: 1 exists, its `completed` prop is updated to true.
// If it does not exist, a new entity { id: 1, completed: true } is added to the collection.
patchState(store, upsertEntity({ id: 1, completed: true }));

These additions are a direct result of community feedback and reflect our focus on ergonomic refinement. By building these common patterns into the library, we reduce boilerplate, eliminate potential bugs in custom implementations, and make the entity management API more complete and intuitive.

Powerful Composition with `withFeature` 🛠️

Custom store features, created with signalStoreFeature, are fantastic for creating reusable, encapsulated logic. However, they have historically been self-contained. What if a reusable feature needs to access a method or property from the specific store it's being applied to?.

NgRx v20 introduces withFeature as the elegant solution to this problem. It's a "feature factory" that receives the current store instance as an argument. This gives your inner feature full, type-safe access to all of the store's existing members, allowing you to create truly powerful and dynamic compositions.

Consider a generic withEntityLoader feature. It defines the logic for loading an entity but delegates the actual data fetching to a loader function provided by the store.

// A reusable feature that uses a loader function
function withEntityLoader<Entity>(loader: (id: string) => Observable<Entity>) {
  return signalStoreFeature(
    withState({ entity: undefined as Entity | undefined, isLoading: false }),
    withMethods((store) => ({
      loadEntity: rxMethod<string>(
        pipe(
          tap(() => patchState(store, { isLoading: true })),
          // The loader function provided by the store is used here
          switchMap((id) => loader(id).pipe(
            tapResponse({
              next: (entity) => patchState(store, { entity, isLoading: false }),
              error: (error) => {
                console.error(error);
                patchState(store, { isLoading: false });
              },
            })
          ))
        )
      )
    }))
  );
}

// The store definition
const ProductsStore = signalStore(
  withMethods((store, productsApi = inject(ProductsApi)) => ({
    // Store-specific implementation of the load method
    load(id: string): Observable<Product> {
      return productsApi.fetchProduct(id);
    },
  })),

  // `withFeature` connects the generic feature to the store's specific `load` method
  withFeature(
    (store) => withEntityLoader((id: string) => store.load(id))
  )
);

Another example is a generic withBooksFilter that can filter out an array of books and provides a method to set such filter. withFeature is this case can be used to pass the specific array from the entities.

import { computed, Signal } from '@angular/core';
import {
  patchState,
  signalStore,
  signalStoreFeature,
  withComputed,
  withFeature,
  withMethods,
  withState,
} from '@ngrx/signals';
import { withEntities } from '@ngrx/signals/entities';
import { Book } from './book';

export function withBooksFilter(books: Signal<Book[]>) {
  return signalStoreFeature(
    withState({ query: '' }),
    withComputed(({ query }) => ({
      filteredBooks: computed(() =>
        books().filter((b) => b.name.includes(query()))
      ),
    })),
    withMethods((store) => ({
      setQuery(query: string): void {
        patchState(store, { query });
      },
    })),
)};

export const BooksStore = signalStore(
  withEntities<Book>(),
  // 👇 Using `withFeature` to pass input to the `withBooksFilter` feature.
  withFeature(({ entities }) => withBooksFilter(entities)),
);

The introduction of withFeature elevates SignalStore from just a state management tool to a powerful framework for creating highly abstract and reusable state management libraries. It enables library authors and teams building large-scale applications to create generic features (e.g., withUndoRedo, withPersistence) that can be adapted to any store's specific context in a completely type-safe manner. This moves SignalStore beyond application-level state and into the realm of architectural pattern creation.

Introducing `withLinkedState` for Advanced Reactivity 🔗

NgRx v20 introduces withLinkedState, a powerful feature for creating derived, reactive state that lives directly within the SignalStore. It allows you to define new state signals that are automatically computed whenever their source signals change.

In its simplest form, you can derive a new signal from existing state. For example, you can create a selectedOption signal that always reflects the first item in an options array:

const OptionsStore = signalStore(
  withState({ options: [1, 2, 3] }),
  withLinkedState(({ options }) => ({
    selectedOption: () => options()[0],
  }))
);

// The store now has a `selectedOption` signal of type `Signal<number | undefined>`.
// When the `options` signal changes, `selectedOption` automatically updates.

For more advanced scenarios, withLinkedState can be combined with linkedSignal (or any WritableSignal) to create stateful computations. This is incredibly useful for patterns where you need to preserve a selection or state even when the underlying data source changes.

For instance, you can maintain the selectedOption even if the options array is reordered or updated, falling back to the first item only if the previously selected one is no longer available:

type Option = { id: number; label: string };

const OptionsStore = signalStore(
  withState({ options: as Option }),
  withLinkedState(({ options }) => ({
    selectedOption: linkedSignal<Option, Option>({
      source: options,
      computation: (newOptions, previous) => {
        // Try to find the previously selected option in the new list
        const option = newOptions.find((o) => o.id === previous?.value.id);
        // Fall back to the first option if not found
        return option ?? newOptions;
      },
    })
  }))
);

withLinkedState provides a clean, declarative API for building complex, interconnected state within your store. It streamlines common reactive patterns, reduces boilerplate, and makes your state logic more explicit and maintainable.

Developer Experience and Tooling

A core focus of NgRx v20 is improving the day-to-day experience of our developers through better testing and tooling.

Simplified Testing with `@ngrx/signals/testing` 🧪

We're happy to announce the new @ngrx/signals/testing package, designed to make testing your SignalStores easier and more intuitive than ever.

Since v18, SignalStore state is encapsulated by default (protectedState: true) to prevent accidental external mutations. This is a fantastic feature for production code, but it can make test setup verbose, as you would need to call a series of public methods to get the store into a specific state for a test.

To solve this, we're introducing the unprotected helper. This is a testing-only utility that allows you to bypass state encapsulation and use patchState directly on the store. This is perfect for the "Arrange" step of your tests, allowing you to set up a specific state scenario with minimal code.

Here’s how it works:

// counter.store.spec.ts
import { TestBed } from '@angular/core/testing';
import { patchState } from '@ngrx/signals';
import { unprotected } from '@ngrx/signals/testing'; // 👈 Import from testing plugin
import { CounterStore } from './counter.store';

describe('CounterStore', () => {
  it('should have the correct double count after state is patched', () => {
    const store = TestBed.inject(CounterStore);

    // Use `unprotected` to bypass encapsulation for test setup
    patchState(unprotected(store), { count: 10 });

    // Assert against the computed signal
    expect(store.doubleCount()).toBe(20);
  });
});

This new helper reflects our pragmatic philosophy of balancing architectural purity with testing practicality. By providing a sanctioned "escape hatch" exclusively for testing (and placing it in a separate testing entry point to discourage production use), we acknowledge the real-world needs of developers and make the entire development lifecycle smoother.

Improved Code Quality with New ESLint Rule

To help you write more robust code, we've added a new rule to @ngrx/eslint-plugin, thanks to a community contribution from wolfmanfx. This rule enforces explicit type invocation in certain generic functions.

This helps prevent a class of subtle bugs where TypeScript's type inference might be too lenient, especially in complex scenarios. By encouraging explicit type invocation, this rule ensures that you are consciously applying the correct types, leading to more robust, predictable, and maintainable code.

You can get this and other helpful rules by installing our ESLint plugin:
ng add @ngrx/eslint-plugin.

Housekeeping and Future Direction

As the Angular and NgRx ecosystems evolve, we sometimes need to adjust our library to ensure it remains lean, focused, and aligned with the framework's direction.

`@ngrx/component` Enters Maintenance Mode

With the release of NgRx v20, the @ngrx/component package is officially entering maintenance mode. This means the package will only receive critical security and bug fixes moving forward, with no new features planned.

We are making this change because the primary problems that @ngrx/component solved are now elegantly handled by the Angular framework itself.

The *ngrxLet directive is now superseded by Angular's built-in @let syntax, which provides a native solution for defining template variables.
The utility of the *ngrxPush pipe is greatly diminished with the rise of Signals and the move towards zoneless applications, which is now in developer preview with Angular v20.

We advise developers to migrate away from @ngrx/component in new and existing applications, preferring the native Angular APIs instead. This decision reflects our commitment to a healthy ecosystem. A library that refuses to deprecate features that have been superseded by the core framework can become bloated and confusing. By making this change, we are sending a clear message: NgRx is here to extend Angular where necessary, not reinvent it. This builds trust and ensures that NgRx remains a focused and relevant part of your toolkit.

SignalStore popularity

We are also excited to announce that SignalStore overtook ComponentStore as the second most popular State Management library in Angular. This is an expected outcome as SignalStore supersedes ComponentStore.

The original NgRx Global Store still continues to hold the number one spot.

Getting Started with NgRx v20

Ready to get started? Upgrading is easy with the Angular CLI.

Run the following command to update your NgRx packages to version 20:
ng update @ngrx/store @ngrx/effects @ngrx/signals @ngrx/component @ngrx/entity @ngrx/router-store @ngrx/schematics @ngrx/eslint-plugin

To use NgRx v20, you'll need the following minimum versions:

Angular v20.x
Angular CLI v20.x
TypeScript v5.8.x

Be sure to explore our updated documentation on ngrx.io for detailed guides and API references for all the new features!

A Big Thank You to Our Community! ❤️

We want to give a special shout-out to a few individuals for their direct contributions to this release:

Dima Vasylyna for implementing the prependEntity feature.
Murat Sari for the new ESLint rule to enforce type invocation.

Sponsor NgRx 🤝

Upcoming NgRx Workshops 🎓

With NgRx usage continuing to grow with Angular, many developers and teams still need guidance on how to architect and build enterprise-grade Angular applications. We are excited to introduce upcoming workshops provided directly by the NgRx team!

We're offering one to three full-day workshops that cover the basics of NgRx to the most advanced topics. Whether your teams are just starting with NgRx or have been using it for a while - they are guaranteed to learn new concepts during these workshops.

Visit our workshops page for more details. The next workshops are scheduled for:

September 24-26 (US Time) | Registration
October 8-10 (EU Time) | Registration

What's Next?

We are incredibly excited about what you will build with NgRx v20. We encourage you to try out the new features and share your feedback with us. We are especially interested in hearing your thoughts on the new experimental Events plugin. Please open issues and discussions on our GitHub repository to let us know what you think.

To stay up-to-date with the latest news, follow us on Twitter and LinkedIn.

Thank you for being part of the NgRx community! Happy coding!

Announcing Events Plugin for NgRx SignalStore: A Modern Take on Flux Architecture

Marko Stanimirović — Mon, 12 May 2025 18:33:31 +0000

We are pleased to announce the introduction of the Events plugin for NgRx SignalStore, released as part of NgRx v19.2! This new addition brings the power of event-based state management to SignalStore, enabling developers to create scalable applications more effectively.

Experimental Stage 🚧

The Events plugin is currently marked as experimental. This means its APIs are subject to change, and modifications may occur in future versions without standard breaking change announcements until it is deemed stable. We encourage you to try it out, provide feedback, and help shape its future!

Flux Architecture 🔄

This plugin takes inspiration from the original Flux architecture and incorporates the best practices and patterns from NgRx Store, NgRx Effects, and RxJS.

The application architecture with the Events plugin is composed of the following building blocks:

Event: Describes an occurrence within the system. Events are dispatched to trigger state changes and/or side effects.
Dispatcher: An event bus that forwards events to their corresponding handlers in the stores.
Store: Contains reducers and effects that manage state and handle side effects, maintaining a clean and predictable application flow.
View: Reflects state changes and dispatches new events, enabling continuous interaction between the user interface and the underlying system.

By dispatching events and reacting to them, the what (the event that occurred) is decoupled from the how (the state changes or side effects that result), leading to predictable data flow and more maintainable code.

Walkthrough 🛠️

The Events plugin provides a set of APIs for defining and handling events in a reactive and declarative manner. The following example demonstrates how these APIs can be used to implement state and behavior orchestration through events.

Defining Events

Events are created using the eventGroup function, which organizes related events under a common source. This function accepts an object with two properties:

source: identifies the origin of the event group (e.g., 'Users Page', 'Users API').
events: a dictionary of named event creators, where each key defines the event name and each value defines the payload type using the type helper from the core @ngrx/signals package.

import { type } from '@ngrx/signals';
import { eventGroup } from '@ngrx/signals/events';

export const usersPageEvents = eventGroup({
  source: 'Users Page',
  events: {
    opened: type<void>(),
    refreshed: type<void>(),
  },
});

export const usersApiEvents = eventGroup({
  source: 'Users API',
  events: {
    loadedSuccess: type<User[]>(),
    loadedFailure: type<string>(),
  },
});

Performing State Changes

To handle state changes in response to events, SignalStore provides the withReducer feature. Case reducers are defined using the on function, which maps one or more events to a case reducer function. Each case reducer receives the event and returns the state update. It supports three forms of return values: a partial state object, a partial state updater, and an array of partial state objects and/or updaters.

import { signalStore } from '@ngrx/signals';
import { setAllEntities, withEntities } from '@ngrx/signals/entities';
import { on, withReducer } from '@ngrx/signals/events';

export const UsersStore = signalStore(
  { providedIn: 'root' },
  withEntities<User>(),
  withRequestStatus(),
  withReducer(
    on(usersPageEvents.opened, usersPageEvents.refreshed, setPending),
    on(usersApiEvents.loadedSuccess, ({ payload }) => [
      setAllEntities(payload),
      setFulfilled(),
    ]),
    on(usersApiEvents.loadedFailure, ({ payload }) => setError(payload)),
  ),
);

💡 Implementation of the withRequestStatus feature and its state updaters is available in the official SignalStore documentation.

Performing Side Effects

Side effects are handled using the withEffects feature. This feature accepts a function that receives the store instance as an argument and returns a dictionary of effects. Each effect is defined as an observable that reacts to specific events using the Events service. If an effect emits a new event, that event will be automatically dispatched.

import { Events, withEffects } from '@ngrx/signals/events';
import { mapResponse } from '@ngrx/operators';

export const UsersStore = signalStore(
  /* ... */
  withEffects(
    (
      store,
      events = inject(Events),
      usersService = inject(UsersService),
    ) => ({
      loadUsers$: events
        .on(usersPageEvents.opened, usersPageEvents.refreshed)
        .pipe(
          exhaustMap(() =>
            usersService.getAll().pipe(
              mapResponse({
                next: (users) => usersApiEvents.loadedSuccess(users),
                error: (error: { message: string }) =>
                  usersApiEvents.loadedFailure(error.message),
              }),
            ),
          ),
        ),
      logError$: events
        .on(usersApiEvents.loadedFailure)
        .pipe(tap(({ payload }) => console.log(payload))),
    }),
  ),
);

Reading State

The plugin doesn’t change how the state is exposed or consumed. Therefore, components can access state and computed signals by using the store instance.

@Component({
  selector: 'app-users',
  template: `
    <h1>Users</h1>

    @if (usersStore.isPending()) {
      <p>Loading...</p>
    }

    <ul>
      @for (user of usersStore.entities(); track user.id) {
        <li>{{ user.name }}</li>
      }
    </ul>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UsersComponent {
  readonly usersStore = inject(UsersStore);
}

Dispatching Events

To initiate state changes or side effects, events can be dispatched using the Dispatcher service. It provides a dispatch method that takes an event as input.

import { Dispatcher } from '@ngrx/signals/events';

@Component({
  /* ... */
  template: `
    <h1>Users</h1>

    <button (click)="refresh()">Refresh</button>
  `,
})
export class UsersComponent {
  readonly usersStore = inject(UsersStore);
  readonly dispatcher = inject(Dispatcher);

  constructor() {
    this.dispatcher.dispatch(usersPageEvents.opened());
  }

  refresh(): void {
    this.dispatcher.dispatch(usersPageEvents.refreshed());
  }
}

For convenience, self-dispatching events can be generated using the injectDispatch function, which returns an object with methods matching the provided event creators.

import { injectDispatch } from '@ngrx/signals/events';

@Component({
  /* ... */
  template: `
    <h1>Users</h1>

    <button (click)="dispatch.refreshed()">Refresh</button>
  `,
})
export class UsersComponent {
  readonly usersStore = inject(UsersStore);
  readonly dispatch = injectDispatch(usersPageEvents);

  constructor() {
    this.dispatch.opened();
  }
}

Scaling Up

As applications grow in complexity, reducers and effects can be extracted into standalone features to improve maintainability.

Extracted Reducer

export function withUsersReducer() {
  return signalStoreFeature(
    { state: type<EntityState<User> & RequestStatusState>() },
    withReducer(
      on(usersPageEvents.opened, usersPageEvents.refreshed, setPending),
      on(usersApiEvents.loadedSuccess, ({ payload }) => [
        setAllEntities(payload),
        setFulfilled(),
      ]),
      on(usersApiEvents.loadedFailure, ({ payload }) => setError(payload)),
    ),
  );
}

Extracted Effects

export function withUsersEffects() {
  return signalStoreFeature(
    withEffects(
      (
        store,
        events = inject(Events),
        usersService = inject(UsersService),
      ) => ({
        loadUsers$: events
          .on(usersPageEvents.opened, usersPageEvents.refreshed)
          .pipe(
            exhaustMap(() =>
              usersService.getAll().pipe(
                mapResponse({
                  next: (users) => usersApiEvents.loadedSuccess(users),
                  error: (error: { message: string }) =>
                    usersApiEvents.loadedFailure(error.message),
                }),
              ),
            ),
          ),
        logError$: events
          .on(usersApiEvents.loadedFailure)
          .pipe(tap(({ payload }) => console.log(payload))),
      }),
    ),
  );
}

Final Store Composition

export const UsersStore = signalStore(
  { providedIn: 'root' },
  withEntities<User>(),
  withRequestStatus(),
  withUsersReducer(),
  withUsersEffects(),
);

Key Takeaways 🔑

The Events plugin:

Combines proven patterns from Flux, NgRx Store, NgRx Effects, and RxJS.
Seamlessly integrates with existing SignalStore features.
Extends Flux architecture with powerful customization options.
Unifies local and global state management with a single approach.

Upcoming NgRx Workshops 🎓

Visit our workshops page for more details. The next workshops are scheduled for:

June 11-13 (EU Time) | Registration
September 24-26 (US Time) | Registration
October 8-10 (EU Time) | Registration

Thanks to All Our Contributors and Sponsors! 🏆

NgRx continues to be a community-driven project. Design, development, documentation, and testing - all are done with the help of the community. Visit our community contributors section to see every person who has contributed to the framework.

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 Gold sponsor, Nx! Nx has been a longtime promoter of NgRx as a tool for building Angular applications and is committed to supporting open-source projects that they rely on.

We want to thank our Bronze sponsor, House of Angular!

Lastly, we also want to thank our individual sponsors who have donated once or monthly.

Sponsor NgRx 🤝

Announcing NgRx 19: NgRx Signals Features, Action Signals, and more!

Brandon Roberts — Thu, 19 Dec 2024 17:22:37 +0000

We are pleased to announce the latest major version of the NgRx framework with some exciting new features, bug fixes, and other updates.

Updated NgRx Signals Features🚦

The NgRx Signals was released as stable in v18 as a new library built from the ground up with Angular Signals, opt-in RxJS interoperability, and entity management out of the box. the NgRx Signals library has continued to receive quality updates and improvements to enhance the developer experience.

New Props SignalStore Feature

One highly requested feature was the ability to define props for a SignalStore during its creation. To support this, the withProps base feature was added to allow static properties or observables to be defined as SignalStore members.

export const BooksStore = signalStore(
  withEntities<Book>(),
  withRequestStatus(),
  withProps(({ isFulfilled }) => ({
    fulfilled$: toObservable(isFulfilled).pipe(filter(Boolean)),
  })),
);

It can also be used for defining all dependencies in a single place:

export const MyStore = signalStore(
  withProps(() => ({
    service1: inject(Service1),
    service2: inject(Service2),
  })),
  withMethods(({ service1, service2 }) => ({
    method1() {
      service1.foo();
    },
    method2() {
      service2.bar();
    },
  }))
);

The new withProps feature integrates together with new Angular Signals features including resource and linkedSignal:

const booksStore = signalStore(
  withProps(() => {
    const bookResource = resource({
      loader: () => Promise.resolve({ id: 1, title: "'Lord of the Rings' }),"
    });
    return {
      _bookResource: bookResource,
      bookResource: bookResource.asReadonly(),
    };
  }),
);

The above exposes bookResource as readonly resource, and keeps the writable resource.

The next example exposes prettyTitle as linkedSignal, and keeps the writable state internally.

signalStore(
  withState({ id: 1, title: "'Lord of the Rings' }),"
  withProps((store) => ({
    prettyTitle: linkedSignal(() => \`${store.id()}: ${state.store()}\`),
  })),
);

The new withProps features allows you customize and extend the SignalStore even further with Angular Signals. Thanks to Marko Stanimirović for his continued work on improving NgRx Signals!

Signal Method Utility Function

The rxMethod utility function was introduced to provide a way to connect async work done with RxJS to Angular Signals. We've also introduced the signalMethod utility function that gives you the same benefits of rxMethod with the ability to use only use signals.

signalMethod is a factory function that processes side effects on signals or static values.

import { Component } from '@angular/core';
import { signalMethod } from '@ngrx/signals';

@Component({ /* ... */ })
export class NumbersComponent {
  // 👇 This method will have an input argument
  // of type `number | Signal<number>`.
  readonly logDoubledNumber = signalMethod<number>((num) => {
    const double = num * 2;
    console.log(double);
  });
}

At first sight, signalMethod, might look the same as an effect. However, signalMethod offers three distinctive advantages over effect:

@Component({ /* ... */ })
export class NumbersComponent {
  readonly num = signal(2);
  readonly logDoubledNumberEffect = effect(() => {
    console.log(this.num() * 2);
  });
  readonly logDoubledNumber = signalMethod<number>((num) => {
    console.log(num * 2);
  });

  constructor() {
    this.logDoubledNumber(this.num);
  }
}

Flexible Input: The input argument can be a static value, not just a signal. Additionally, the processor function can be called multiple times with different inputs.
No Injection Context Required: Unlike an effect, that requires an injection context or an Injector, signalMethod's "processor function" can be called without an injection context.
Explicit Tracking: Only the Signal of the parameter is tracked, while Signals within the "processor function" stay untracked.

Read the docs to learn more about signalMethod.

Development Mode Checks for State Mutations

Ensuring that state updates are immutable is crucial for Signal to emit correctly and trigger necessary DOM updates, derived signals, or side effects. To mitigate this issue the patchState function applies a deep freeze on the state in development mode.

Before:

const userState = signalState(initialState);
patchState(userState, (state) => {
  state.user.firstName = 'mutable change'; // mutable change which went through
  return state;
});

After:

const userState = signalState(initialState);
patchState(userState, (state) => {
  state.user.firstName = 'mutable change'; // throws in dev mode
  return state;
});

This ensures that state changes remain immutable, providing a path to retaining performance and best practices.

NgRx Store Support for Dispatching Actions on Signal changes

NgRx Store remains the defacto choice for global state management within Angular applications. NgRx Store previously introduced support for selecting state as a signal, and now introduces an ergonomic way to dispatch actions that read signals.

class BookComponent {
  bookId = input.required<number>();

  constructor(store: Store) {
    store.dispatch(() => loadBook({ id: this.bookId() })));
  }
}

The dispatch method executes initially and every time the bookId changes. If dispatch is called within an injection context, the signal is tracked until the context is destroyed. In the example above, that would be when BookComponent is destroyed.

When dispatch is called outside a component's injection context, the signal is tracked globally throughout the application's lifecycle. To ensure proper cleanup in such a case, provide the component's injector to the dispatch method:

class BookComponent {  
  bookId = input.required<number>();
  injector = inject(Injector);
  store = inject(Store);

  ngOnInit() {
    // runs outside the injection context
    this.store.dispatch(
      () => loadBook({ id: this.bookId() }),
      { injector: this.injector }
    );
  }
}

Thanks to Rainer Hahnekamp for adding these features!

NgRx Signals, the new Default 🤝

NgRx Signals is a ground-up approach to managing state reactively, and is opt-in for RxJS usage. It also has other utilities for working with Angular Signals in a structured way that helps developers scale up. NgRx Signals is now the recommended local state management library to integrate into your Angular applications. For new applications, start with NgRx SignalStore. For existing applications, consider migrating to the new @ngrx/signals package.

NgRx Workshops 🎓

Starting in Feburary, we will offer one to three full-day workshops that cover the basics of NgRx to the most advanced topics. Whether your teams are just starting with NgRx or have been using it for a while - they are guaranteed to learn new concepts during these workshops.

The workshop covers both global state with NgRx Store and libraries, along with managing local state with NgRx ComponentStore and NgRx Signals.

Visit our workshops page to sign up from our list of upcoming workshops.

New Docs site 💅

The new docs revamp is underway and is built up from scratch using AnalogJS and will have a brand-new design and revamped content. This will make sure to offer the best possible experience to our users and make it easier to find the information you need. It also ensures that the website will become easier to maintain and update. Because we're a community-driven project, we're keeping in mind that the website should be easy to contribute to.

Thanks to Mike Ryan for his work on the new version of the NgRx website.

Deprecations and Breaking Changes 💥

This release contains bug fixes, deprecations, and breaking changes. For most of these deprecations or breaking changes, we've provided a migration that automatically runs when you upgrade your application to the latest version.

Take a look at the version 19 migration guide for complete information regarding migrating to the latest release. The complete CHANGELOG can be found in our GitHub repository.

Upgrading to NgRx 19 🗓️

To start using NgRx 19, make sure to have the following minimum versions installed:

Angular version 19.x
Angular CLI version 19.x
TypeScript version 5.5.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@19

If your project uses @ngrx/signals, run the following command:

ng update @ngrx/signals@19

Swag Store and Discord Server 🦺

You can get official NgRx swag through our store! T-shirts with the NgRx logo are available in many different sizes, materials, and colors. We will look at adding new items to the store such as stickers, magnets, and more in the future. Visit our store to get your NgRx swag today!

Join our Discord server for those who want to engage with other members of the NgRx community, old and new.

Contributing to NgRx 🥰

We're always trying to improve the docs and keep them up-to-date for users of the NgRx framework. To help us, you can start contributing to NgRx. If you're unsure where to start, come take a look at our contribution guide and watch the introduction video Jan-Niklas Wortmann and Brandon Roberts have made to help you get started.

Thanks to all our contributors and sponsors!

NgRx continues to be a community-driven project. Design, development, documentation, and testing all are done with the help of the community. Visit our community contributors section to see every person who has contributed to the framework.

We want to give a big thanks to our Gold sponsor, Nx! Nx has been a longtime promoter of NgRx as a tool for building Angular applications, and is committed to supporting open source projects that they rely on.

We also want to thank our Bronze sponsor, House of Angular!

Announcing NgRx Signals v18: State Encapsulation, Private Store Members, Enhanced Entity Management, and more!

Marko Stanimirović — Thu, 25 Jul 2024 13:24:14 +0000

We are pleased to announce the latest major version of NgRx Signals, featuring exciting new features, bug fixes, and other updates.

NgRx Signals Are Now Stable! 🎉

As of version 18, the @ngrx/signals package is out of developer preview and is now production-ready.

State Encapsulation 🔒

In previous versions, SignalStore's state could be updated from the outside.

// v17:
export const CounterStore = signalStore(
  withState({ count: 0 }),
  withMethods((store) => ({
    setCount(count: number): void {
      patchState(store, { count }); // ✅
    },
  }))
);

// ===

const store = inject(CounterStore);
patchState(store, { count: 10 }); // ✅

In version 18, the state is protected from external modifications by default, ensuring a consistent and predictable data flow.

// v18:
const CounterStore = signalStore(
  withState({ count: 0 }),
  withMethods((store) => ({
    setCount(count: number): void {
      patchState(store, { count }); // ✅
    },
  }))
);

// ===

const store = inject(CounterStore);
patchState(store, { count: 10 }); // ❌ compilation error

However, for more flexibility in some cases, external updates to the state can be enabled by setting the protectedState option to false when creating a SignalStore.

const CounterStore = signalStore(
  { protectedState: false }, // 👈
  withState({ count: 0 })
);

// ===

const store = inject(CounterStore);
// ⚠️ The state is unprotected from external modifications.
patchState(store, { count: 10 });

💡 For backward compatibility, the migration schematic that adds protectedState: false to all existing signal stores is automatically executed on upgrade.

Ensuring Integrity of Store Members 👨‍⚕️

As of version 18, overriding SignalStore members is not allowed. If any store member is accidentally overridden, a warning will be displayed in development mode.

const CounterStore = signalStore(
  withState({ count: 0 }),
  withMethods(() => ({
    // ⚠️ @ngrx/signals: SignalStore members cannot be overridden.
    count(): void {},
  }))
);

Private Store Members 🛡️

SignalStore allows defining private members that cannot be accessed from outside the store by using the _ prefix. This includes root-level state slices, computed signals, and methods.

const CounterStore = signalStore(
  withState({
    count1: 0,
    // 👇 private state slice
    _count2: 0,
  }),
  withComputed(({ count1, _count2 }) => ({
    // 👇 private computed signal
    _doubleCount1: computed(() => count1() * 2),
    doubleCount2: computed(() => _count2() * 2),
  })),
  withMethods((store) => ({
    increment1(): void { /* ... */ },
    // 👇 private method
    _increment2(): void { /* ... */ },
  })),
);

// ===

const store = inject(CounterStore);

store.count1(); // ✅
store._count2(); // ❌ compilation error

store._doubleCount1(); // ❌ compilation error
store.doubleCount2(); // ✅

store.increment1(); // ✅
store._increment2(); // ❌ compilation error

💡 Learn more about private store members in the Private Store Members guide.

State Tracking 🕵

State tracking enables the implementation of custom SignalStore features such as logging, state undo/redo, and storage synchronization.

In previous versions, it was possible to track SignalStore state changes by using the getState function with effect.

const CounterStore = signalStore(
  withState({ count: 0 }),
  withMethods((store) => ({
    increment(): void { /* ... */ },
  })),
  withHooks({
    onInit(store) {
      effect(() => {
        // 👇 The effect is re-executed on state change.
        const state = getState(store);
        console.log('counter state', state);
      });

      setInterval(() => store.increment(), 1_000);
    },
  })
);

Due to the effect glitch-free behavior, if the state is changed multiple times in the same tick, the effect function will be executed only once with the final state value. While the asynchronous effect execution is beneficial for performance reasons, functionalities such as state undo/redo require tracking all SignalStore's state changes without coalescing state updates in the same tick.

In this release, the @ngrx/signals package provides the watchState function, which allows for synchronous tracking of SignalStore's state changes. It accepts a SignalStore instance as the first argument and a watcher function as the second argument.

By default, the watchState function needs to be executed within an injection context. It is tied to its lifecycle and is automatically cleaned up when the injector is destroyed.

const CounterStore = signalStore(
  withState({ count: 0 }),
  withMethods((store) => ({
    increment(): void { /* ... */ },
  })),
  withHooks({
    onInit(store) {
      watchState(store, (state) => {
        console.log('[watchState] counter state', state);
      }); // logs: { count: 0 }, { count: 1 }, { count: 2 }

      effect(() => {
        console.log('[effect] counter state', getState(store));
      }); // logs: { count: 2 }

      store.increment();
      store.increment();
    },
  })
);

In the example above, the watchState function will execute the provided watcher 3 times: once with the initial counter state value and two times after each increment. Conversely, the effect function will be executed only once with the final counter state value.

💡 Learn more about the watchState function in the State Tracking guide.

Enhanced Entity Management 🧩

In version 18, the @ngrx/signals/entities plugin received several enhancements.

`selectId`

In previous versions, updating an entity collection with a custom identifier was performed using the idKey property.

// v17:
type Todo = { _id: number; text: string };

const TodosStore = signalStore(
  withEntities<Todo>(),
  withMethods((store) => ({
    addTodo(todo: Todo): void {
      patchState(store, addEntity(todo, { idKey: '_id' }));
    },
  }))
);

If an entity has a composite identifier (a combination of two or more properties), idKey cannot be used.

In this release, selectId is introduced instead of idKey for better flexibility.

// v18:
type Todo = { _id: number; text: string };

const selectId: SelectEntityId<Todo> = (todo) => todo._id;

const TodosStore = signalStore(
  withEntities<Todo>(),
  withMethods((store) => ({
    addTodo(todo: Todo): void {
      patchState(store, addEntity(todo, { selectId }));
    },
  }))
);

`entityConfig`

The entityConfig function reduces repetitive code when defining a custom entity configuration and ensures strong typing. It accepts a config object where the entity type is required, and the collection name and custom ID selector are optional.

const todoConfig = entityConfig({
  entity: type<Todo>(),
  collection: 'todo',
  selectId: (todo) => todo._id,
});

const TodosStore = signalStore(
  withEntities(todoConfig),
  withMethods((store) => ({
    addTodo(todo: Todo): void {
      patchState(store, addEntity(todo, todoConfig));
    },
  }))
);

💡 Learn more about the @ngrx/signals/entities plugin in the Entity Management guide.

Upgrading to NgRx Signals 18 🛠️

To start using NgRx Signals 18, make sure to have the following minimum versions installed:

Angular version 18.x
Angular CLI version 18.x
TypeScript version 5.4.x

NgRx supports using the Angular CLI ng update command to update your NgRx packages. To update the @ngrx/signals package to the latest version, run the command:

ng update @ngrx/signals@18

Upcoming NgRx Workshops 🎓

Visit our workshops page to sign up from our list of upcoming workshops. The next workshops are scheduled for September 18-20 (US-based time) and October 16-18 (Europe-based time). The early bird discount is still active!

Welcoming New Additions to the NgRx Team 💪

After a long break, Mike Ryan is back on the NgRx core team! As one of the original co-creators of NgRx, Mike wrote the first lines of code for the @ngrx/effects, @ngrx/entity, and @ngrx/store-devtools packages. We are thrilled to have him return to the team! Welcome back, Mike! 💜

We have another exciting announcement: Rainer Hahnekamp has joined the NgRx team as a trusted collaborator! Rainer is a Google Developer Expert in Angular, an active contributor to the NgRx repository, a maintainer of the NgRx Toolkit community plugin, and the creator of numerous insightful articles and videos on NgRx. Welcome aboard, Rainer! 🚀

Thanks to All Our Contributors and Sponsors! 🏆

We want to thank our Bronze sponsor, House of Angular!

Lastly, we also want to thank our individual sponsors who have donated once or monthly.

Sponsor NgRx 🤝

Announcing NgRx 18: NgRx Signals is almost stable, ESLint v9 Support, New Logo and Redesign, Workshops, and more!

Tim Deschryver — Thu, 13 Jun 2024 19:41:00 +0000

We are pleased to announce the latest major version of the NgRx framework with some exciting new features, bug fixes, and other updates.

Stable NgRx Signals 🚦 (it's almost there)

Update (2024-07-25): NgRx Signals is officially released, take a look at the Release Post for more info.

In NgRx version 17 we announced NgRx Signals, which was and still is in developer preview.
From the first release Marko Stanimirović further improved and stabilized @ngrx/signals with the help of the community. A special thanks to Rainer Hahnekamp for his thoughts, feedback, and the provided help.

There are still some loose ends that need to be ironed out, but we're planning to officially release a stable version in one of the next minor releases. We're confident that this brings a solid, flexible, and scalable reactive state management solution with good developer ergonomics for Angular Signals.

This means that after a year of hard work, we're getting close to getting @ngrx/signals out of the the developer preview phase.

From the look of it our users are ready for the release, as we're seeing a lot of excitement and positive feedback. The numbers also show that the usage of @ngrx/signals is increasing gradually, hitting 50k downloads per week.

To get started with @ngrx/signals, install the package via one of the commands below and follow the @ngrx/signals Guide.

npm install @ngrx/signals

You can also use the ng add command:

ng add @ngrx/signals

ESLint Plugin support for ESLint v9 🧹

In this release, we've added support for ESLint v9. This means that you can now use the NgRx ESLint plugin with the latest version of ESLint. The plugin is designed to help you write better NgRx code by providing rules that enforce best practices and help you avoid common mistakes for working with packages from the NgRx platform.

We also took the opportunity to update the pre-configured rules to make it easier for you to get started with the plugin, including new new set of rules for @ngrx/signals.
If you're experiencing any issues with the plugin, please check the updated documentation to find the new subdivisions of our rules.

You don't have to worry about the compatibility of the plugin, because we've ensured that this is backwards compatible with older versions of ESLint as well.
If you're interested in using the plugin with ESLint v9, you can import and configure the plugin from @ngrx/eslint-plugin/v9:

const tseslint = require("typescript-eslint");
const ngrx = require("@ngrx/eslint-plugin/v9");

module.exports = tseslint.config({
  files: ["**/*.ts"],
  extends: [
    // 👇 Use all rules or only import the rules for a specific package
    ...ngrx.configs.all,
    ...ngrx.configs.store,
    ...ngrx.configs.effects,
    ...ngrx.configs.componentStore,
    ...ngrx.configs.operators,
    // 🎉 New rules for @ngrx/signals
    ...ngrx.configs.signals,
  ],
  rules: {
    // 👇 Configure specific rules
    "@ngrx/with-state-no-arrays-at-root-level": "warn",
  },
});

If you want to migrate to ESLint v9, we encourage to update Angular ESLint to the latest version (v18) as well.

New NgRx Operators Package 🛠️

In NgRx v17 we introduced the new package @ngrx/operators as a place for common and useful RxJS operators that are used in Angular applications.

The v18 release continues the migration of the concatLatestFrom (from @ngrx/effects) and tapResponse (from @ngrx/component-store) RxJS operators to @ngrx/operators. From NgRx v18 the operators are only available from @ngrx/operators and are no longer part of the @ngrx/effects and @ngrx/component-store packages.

New Logo and Redesign of ngrx.io 💅

If you haven't noticed yet, we've updated the NgRx logo to a new look that follows the new Angular branding.
Many thanks to designs from our community, in the end we decided to go with the design from Robin Goetz, thanks Robin!.
The new logo (in purple and white) can be found on our Press Kit page, so make sure you've updated the logo in your content.

After using our website ngrx.io for a while now, we're thinking that it's time for a redesign.
Behind the scenes Mike Ryan is working on a new version of the NgRx website.

The new website is build up from scratch using Analog.js and will have a brand-new design and revamped content.
This to make sure to offer the best possible experience to our users and to make it easier to find the information you need.
It also ensures that the website will become easier to maintain and update.

Because we're a community-driven project, we're keeping in mind that the website should be easy to contribute to.

Deprecations and Breaking Changes 💥

We want to highlight one breaking change in particular, which we expect to have a big impact.
Because we've seen many users import the TypedAction type via a deep import (which is not recommended), we've decided to merge the TypedAction type with the Action type in the @ngrx/store package. If you're using the ng update schematics, the migration automatically updates your imports to use the new location.

Take a look at the version 18 migration guide for complete information regarding migrating to the latest release. The complete CHANGELOG can be found in our GitHub repository.

Upgrading to NgRx 18 🗓️

To start using NgRx 18, make sure to have the following minimum versions installed:

Angular version 18.x
Angular CLI version 18.x
TypeScript version 5.4.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@l8

If your project uses @ngrx/component-store or @ngrx/signals, but not @ngrx/store, run the following command:

ng update @ngrx/component-store@18
ng update @ngrx/signals@18

NgRx Workshops 🎓

The workshop covers both global state with NgRx Store and libraries, along with managing local state with NgRx ComponentStore and NgRx Signals.

Visit our workshops page to sign up from our list of upcoming workshops. The next workshops are scheduled for September 18-20 (US-based time) and October 16-18 (Europe-based time).

Swag Store and Discord Server 🦺

Join our Discord server for those who want to engage with other members of the NgRx community, old and new.

Contributing to NgRx 🥰

Thanks to all our contributors and sponsors! 🏆

We want to thank our Bronze sponsor, House of Angular!

Lastly, we also want to thank our individual sponsors who have donated once or monthly.

If you are interested in sponsoring NgRx, visit our GitHub sponsors page.

Announcing NgRx v17: Introducing NgRx Signals, Operators, Performance Improvements, Workshops, and more!

Brandon Roberts — Wed, 22 Nov 2023 16:44:42 +0000

We are pleased to announce the latest major version of the NgRx framework with some exciting new features, bug fixes, and other updates.

Introducing NgRx Signals 🚦

Previously, we opened an RFC for a new state management solution that will provide first-class support for reactivity with Angular Signals. We're excited to introduce the @ngrx/signals library.

The NgRx Signals library is built from the ground up with Angular Signals, opt-in RxJS interoperability, and includes entity management out of the box. Many thanks to Marko Stanimirović for proposing the new library, along with building and improving the library with feedback from the rest of the NgRx team, and the community. The Signals library starts a new generation of Angular applications built with NgRx and Angular Signals.

Getting Started

To install the @ngrx/signals package, use your package manager of choice:

npm install @ngrx/signals

You can also use the ng add command:

ng add @ngrx/signals@latest

Defining State

Not every piece of state needs its own store. For this use case, @ngrx/signals comes with a signalState utility function to quickly create and operate on small slices of state. This can be used directly in your component class, service, or a standalone function.

import { Component } from '@angular/core';
import { signalState, patchState } from '@ngrx/signals';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    Count: {{ state.count() }} 

    <button (click)="increment()">Increment</button>
    <button (click)="decrement()">Decrement</button>
    <button (click)="reset()">Reset</button>
  `,
})
export class CounterComponent {
  state = signalState({ count: 0 });

  increment() {
    patchState(this.state, (state) => ({ count: state.count + 1 }));
  }

  decrement() {
    patchState(this.state, (state) => ({ count: state.count - 1 }));
  }

  reset() {
    patchState(this.state, { count: 0 });
  }
}

The patchState utility function provides a type-safe way to perform immutable updates on pieces of state.

Creating a Store

For managing larger stores with more complex pieces of state, you can use the signalStore utility function, along with patchState, and other functions to manage the state.

import { computed } from '@angular/core';
import { signalStore, withState } from '@ngrx/signals';

export const CounterStore = signalStore(
  withState({ count: 0 })
);

The withState function takes the initial state of the store and defines the shape of the state.

Deriving Computed Values

Computed properties can also be derived from existing pieces of state in the store using the withComputed function.

import { computed } from '@angular/core';
import { signalStore, patchState, withComputed } from '@ngrx/signals';

export const CounterStore = signalStore(
  withState({ count: 0 }),
  withComputed(({ count }) => ({
    doubleCount: computed(() => count() * 2),
  })),
);

The doubleCount property is exposed as a property on the stored that reacts to changes to count.

Defining Store Methods

You can also define methods that are exposed publicly to operate on the store with a well-defined API.

import { computed } from '@angular/core';
import { signalStore, patchState, withComputed, withMethods } from '@ngrx/signals';

export const CounterStore = signalStore(
  withState({ count: 0 }),
  withComputed(({ count }) => ({
    doubleCount: computed(() => count() * 2),
  })),
  withMethods(({ count, ...store }) => ({
    increment() {
      patchState(store, { count: count() + 1 });
    },
    decrement() {
      patchState(store, { count: count() - 1 });
    },
  }))
);

Defining Lifecycle Hooks

You can also create lifecycle hooks that are called when the store is created and destroyed, to initialize fetching data, updating state, and more.

import { computed } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';
import {
  signalStore,
  withState,
  patchState,
  withComputed,
  withHooks,
  withMethods,
} from '@ngrx/signals';

export const CounterStore = signalStore(
  withState({ count: 0 }),
  withComputed(({ count }) => ({
    doubleCount: computed(() => count() * 2),
  })),
  withMethods(({ count, ...store }) => ({
    increment() {
      patchState(store, { count: count() + 1 });
    },
    decrement() {
      patchState(store, { count: count() - 1 });
    },
  })),
  withHooks({
    onInit({ increment }) {
      interval(2_000)
        .pipe(takeUntilDestroyed())
        .subscribe(() => increment());
    },
    onDestroy({ count }) {
      console.log('count on destroy', count());
    },
  }),
);

In the example above, the onInit hook subscribes to an interval observable, calls the increment method on the store to increment the count every 2 seconds. The lifecycle methods also have access to the injection context for automatic cleanup using takeUntilDestroyed().

Providing and Injecting the Store

To use the CounterStore, add it to the providers array of your component, and inject it using dependency injection.

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { CounterStore } from './counter.store';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <h1>Counter (signalStore)</h1>

    <p>Count: {{ store.count() }}</p>
    <p>Double Count: {{ store.doubleCount() }}</p>

    <button (click)="store.increment()">Increment</button>
    <button (click)="store.decrement()">Decrement</button>
  `,
  providers: [CounterStore],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class CounterComponent {
  readonly store = inject(CounterStore);
}

Opt-in Interopability with RxJS

RxJS is still a major part of NgRx and the Angular ecosystem, and the NgRx Signals package provides opt-in usage to interact with RxJS observables using the rxMethod function.

The rxMethod function allows you to define a method on the signalStore that can receive a signal or observable, read its latest values, and perform additional operations with an observable.

import { inject } from '@angular/core';
import { debounceTime, distinctUntilChanged, pipe, switchMap, tap } from 'rxjs';
import {
  signalStore,
  patchState,
  withHooks,
  withMethods,
  withState,
} from '@ngrx/signals';
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { tapResponse } from '@ngrx/operators';
import { User } from './user.model';
import { UsersService } from './users.service';

type State = { users: User[]; isLoading: boolean; query: string };

const initialState: State = {
  users: [],
  isLoading: false,
  query: '',
};

export const UsersStore = signalStore(
  { providedIn: 'root' },
  withState(initialState),
  withMethods((store, usersService = inject(UsersService)) => ({
    updateQuery(query: string) {
      patchState(store, { query });
    },
    async loadAll() {
      patchState(store, { isLoading: true });
      const users = await usersService.getAll();
      patchState(store, { users, isLoading: false });
    },
    loadByQuery: rxMethod<string>(
      pipe(
        debounceTime(300),
        distinctUntilChanged(),
        tap(() => patchState(store, { isLoading: true })),
        switchMap((query) =>
          usersService.getByQuery(query).pipe(
            tapResponse({
              next: (users) => patchState(store, { users }),
              error: console.error,
              finalize: () => patchState(store, { isLoading: false }),
            }),
          ),
        ),
      ),
    ),
  })),
  withHooks({
    onInit({ loadByQuery, query }) {
      loadByQuery(query);
    },
  }),
);

The example UserStore above uses the rxMethod operator to create a method that loads the users on initialization of the store based on a query string.

The UsersStore can then be used in the component, along with its additional methods, providing a clean, structured way to manage state with signals, combined with the power of RxJS observable streams for asynchronous behavior.

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { SearchBoxComponent } from './ui/search-box.component';
import { UserListComponent } from './ui/user-list.component';
import { UsersStore } from './users.store';

@Component({
  selector: 'app-users',
  standalone: true,
  imports: [SearchBoxComponent, UserListComponent],
  template: `
    <h1>Users (RxJS Integration)</h1>

    <app-search-box
      [query]="store.query()"
      (queryChange)="store.updateQuery($event)"
    />

    <app-user-list [users]="store.users()" [isLoading]="store.isLoading()" />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class UsersComponent {
  readonly store = inject(UsersStore);
}

The @ngrx/signals package also includes functionality for managing entities, composing shared features, sharing global stores, and can be extended to many different use cases.

Check out the NgRx docs to get more examples and usage on the new @ngrx/signals packages.

The NgRx Signals package is in developer preview while we get feedback from usage and improve its APIs. We're also looking for some logo ideas for the NgRx Signals package! Check out the open issue and/or give us some suggestions!

Many thanks to Manfred Steyer and Rainer Hahnekamp from the Angular Architects team for their valuable feedback and presentations on the NgRx Signals library.

The Future of NgRx Libraries 🔮

With the introduction of the NgRx Signals library, you may be wondering what is going to happen with the other NgRx libraries.

The ecosystem around NgRx Store continues to scale very well for big enterprise applications, and we will continue to improve integration with Signals without disrupting its natural workflow.

NgRx ComponentStore was built to fill a gap of reactivity and structure around state management with RxJS at a local level before Angular Signals were introduced. It's also being used with enterprise apps and continues to provide value. Some people will stick with it longer as it's been around longer and is more battle-tested today. There are no plans to deprecate it.

NgRx Signals is a ground-up approach to managing state reactively, gets its roots from ComponentStore APIs, and is opt-in for RxJS usage. It also has other utilities for working with Angular Signals in a structured way that helps developers scale up. So it's not a replacement for ComponentStore in that way. We'll see as more people start to use NgRx Signals and make the experience better. It's inherited lots of what we've learned over maintaining these libraries for years.

Each package serves a purpose in the NgRx ecosystem and will continue to do so.

NgRx Workshops 🎓

Starting in January, we will offer one to three full-day workshops that cover the basics of NgRx to the most advanced topics. Whether your teams are just starting with NgRx or have been using it for a while - they are guaranteed to learn new concepts during these workshops.

The workshop covers both global state with NgRx Store and libraries, along with managing local state with NgRx ComponentStore and NgRx Signals.

Visit our workshops page to sign up from our list of upcoming workshops.

New NgRx Operators Package 🛠

As the NgRx framework packages have expanded, over time there have been some RxJS operators that are useful across many different areas. These operators are tapResponse in the NgRx ComponentStore package, and concatLatestFrom in the NgRx Effects package.

The tapResponse operator provides an easy way to handle the response from an Observable in a safe way. It enforces that the error case is handled and that the effect would still be running should an error occur.

The concatLatestFrom operator functions similarly to withLatestFrom with one important difference - it lazily evaluates the provided Observable factory.

We are introducing the @ngrx/operators package to provide these general-purpose operators to any Angular application. The NgRx ComponentStore and NgRx Effects packages still provide these operators as they are re-exported from the @ngrx/operators package.

Better Performance with NgRx StoreDevtools

NgRx StoreDevtools provides a way to easily debug, trace, and inspect the flow of actions throughout your application when using NgRx Store. Previously, when connecting the StoreDevtools to the Redux Devtools Extension, this connection was done inside the context of Angular change detection with zone.js. This could lead to additional change detection cycles when interacting with the Redux Devtools.

We have improved this by connecting to the Redux Devtools outside the context of the Angular Zone, providing better performance for new and existing applications when using NgRx Store, and NgRx StoreDevtools together.

As part of the v17 upgrade, a migration is run as an opt-in for existing applications:

For module-based applications:

import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    StoreDevtoolsModule.instrument({
      connectInZone: true,
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

For applications using standalone APIs:

import { provideStoreDevtools } from '@ngrx/store-devtools';

bootstrapApplication(AppComponent, {
  providers: [
    provideStoreDevtools({
      maxAge: 25,
      logOnly: !isDevMode(),
      connectInZone: true
    }),
  ],
});

You can opt out of connecting in the context of Angular change detection with zone.js by removing the connectInZone property from the StoreDevtools options. For new applications, this is the default behavior.

Thanks to Artur Androsovych for the contribution!

Dark Mode for the Docs 😎

Another long-awaited feature that has been added to our documentation is dark mode!

Many thanks to Mateusz Stefańczyk for the contribution!

NgRx Data in Maintenance Mode 👨‍🔧

Ward Bell and John Papa originally created the NgRx Data package as a way to use NgRx Store, Effects, and Entity to handle collections of data in a more structured way. While this package has provided some value to developers over the years, it has not continued to evolve as much as the rest of the NgRx Libraries to be more extensible.

With new libraries and patterns emerging, we have decided to move NgRx Data into maintenance mode.

This means:

NgRx Data will not be deprecated in v17.
New feature requests for this package won't be accepted.
NgRx Data won't be recommended for new and existing projects.

We will recommend some strategies for migrating away from NgRx Data in the future for those looking to do so.

Deprecations and Breaking Changes 💥

Take a look at the version 17 migration guide for complete information regarding migrating to the latest release. The complete CHANGELOG can be found in our GitHub repository.

Upgrading to NgRx 17 🗓️

To start using NgRx 17, make sure to have the following minimum versions installed:

Angular version 17.x
Angular CLI version 17.x
TypeScript version 5.2.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

If your project uses @ngrx/component-store, but not @ngrx/store, run the following command:

ng update @ngrx/component-store

Swag Store and Discord Server 🦺

Join our Discord server for those who want to engage with other members of the NgRx community, old and new.

Contributing to NgRx 🥰

Thanks to all our contributors and sponsors!

We also want to thank our Bronze sponsor, House of Angular!

Announcing NgRx v16: Integration with Angular Signals, Functional Effects, Standalone Schematics, and more!

Marko Stanimirović — Tue, 09 May 2023 16:40:57 +0000

We are pleased to announce the latest major version of the NgRx framework with some exciting new features, bug fixes, and other updates.

NgRx 🤝 Signals

As part of the v16 release, Angular introduced a new reactivity model powered by signals. Signal APIs provide a simple way of managing state and will significantly improve the rendering performance of Angular applications in the future.

In v16, NgRx Store has a new method, selectSignal, which provides integration with Angular Signals. This method expects a selector as an input argument and returns a signal of the selected state slice. It has a similar signature to the select method, but unlike select, selectSignal returns a signal instead of an observable.

import { Component, inject } from '@angular/core';
import { NgFor } from '@angular/common';
import { Store } from '@ngrx/store';

import { selectUsers } from './users.selectors';

@Component({
  standalone: true,
  imports: [NgFor],
  template: `
    <h1>Users</h1>

    <ul>
      <li *ngFor="let user of users()">
        {{ user.name }}
      </li>
    </ul>
  `
})
export class UsersComponent {
  private readonly store = inject(Store);

  // type: Signal<User[]>
  readonly users = this.store.selectSignal(selectUsers);
}

ComponentStore also provides the selectSignal method, which has two signatures. The first signature creates a signal from the provided state projector function, while the second creates a signal by combining provided signals, similar to the select method that combines provided observables.

import { Injectable } from '@angular/core';
import { ComponentStore } from '@ngrx/component-store';

import { User } from './user.model';

type UsersState = { users: User[]; query: string };

@Injectable()
export class UsersStore extends ComponentStore<UsersState> {
  // type: Signal<User[]>
  readonly users = this.selectSignal((s) => s.users);
  // type: Signal<string>
  readonly query = this.selectSignal((s) => s.query);
  // type: Signal<User[]>
  readonly filteredUsers = this.selectSignal(
    this.users,
    this.query,
    (users, query) =>
      users.filter(({ name }) => name.includes(query))
  );
}

Similar to the computed function, the selectSignal method also accepts the equality function to stop the recomputation of the deeper dependency chain if two values are determined to be equal.

The state signal is another addition to the ComponentStore. Instead of using selectSignal, it can be used together with the computed function to create derived signals.

import { computed, Injectable } from '@angular/core';
import { ComponentStore } from '@ngrx/component-store';

import { User } from './user.model';

type UsersState = { users: User[]; query: string };

@Injectable()
export class UsersStore extends ComponentStore<UsersState> {
  readonly users = computed(() => this.state().users);
  readonly query = computed(() => this.state().query);

  readonly filteredUsers = computed(() =>
    this.users().filter(({ name }) => name.includes(this.query()))
  );
}

Functional Effects 🔥

In the past, we couldn't create NgRx effects outside of classes because Angular only supported constructor-based dependency injection. However, things have changed with the inject function and we can now inject tokens and services outside of class constructors. This provides the ability to define NgRx effects as functions outside of effect classes.

Let's see the functional effects in action!

To create a functional effect, add the functional: true flag to the effect config. Then, to inject services into the effect, use the inject function.

import { inject } from '@angular/core';
import { catchError, exhaustMap, map, of, tap } from 'rxjs';
import { Actions, createEffect, ofType } from '@ngrx/effects';

import { UsersService } from './users.service';
import { UsersPageActions } from './users-page.actions';
import { UsersApiActions } from './users-api.actions';

export const loadUsers = createEffect(
  (
    actions$ = inject(Actions),
    usersService = inject(UsersService)
  ) => {
    return actions$.pipe(
      ofType(UsersPageActions.opened),
      exhaustMap(() =>
        usersService.getAll().pipe(
          map((users) =>
            UsersApiActions.usersLoadedSuccess({ users })
          ),
          catchError((error) =>
            of(UsersApiActions.usersLoadedFailure({ error }))
          )
        )
      )
    );
  },
  { functional: true }
);

export const displayErrorAlert = createEffect(
  () => {
    return inject(Actions).pipe(
      ofType(UsersApiActions.usersLoadedFailure),
      tap(({ error }) => alert(error.message))
    );
  },
  { functional: true, dispatch: false }
);

💡 To make testing easier, it's recommended to inject all dependencies as effect function arguments. However, it's also possible to inject dependencies in the effect function body. In that case, the inject function must be called within the injection context.

To register functional effects, pass the dictionary of effects to the provideEffects function.

import { bootstrapApplication } from '@angular/platform-browser';
import { provideStore } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';

import { AppComponent } from './app.component';
import * as usersEffects from './users.effects';

bootstrapApplication(AppComponent, {
  providers: [
    provideStore(),
    provideEffects(usersEffects),
  ],
});

💡 In module-based Angular applications, functional effects can be registered using the EffectsModule.forRoot or EffectsModule.forFeature methods.

Functional effects can be tested like any other function. If all dependencies are injected as effect function arguments, TestBed is not required to mock dependencies. Instead, fake instances can be passed as input arguments to the functional effect.

import { of } from 'rxjs';

import { loadUsers } from './users.effects';
import { UsersService } from './users.service';
import { usersMock } from './users.mock';
import { UsersPageActions } from './users-page.actions';
import { UsersApiActions } from './users-api.actions';

it('loads users successfully', (done) => {
  const usersServiceMock = {
    getAll: () => of(usersMock),
  } as UsersService;
  const actionsMock$ = of(UsersPageActions.opened());

  loadUsers(actionsMock$, usersServiceMock).subscribe((action) => {
    expect(action).toEqual(
      UsersApiActions.usersLoadedSuccess({ users: usersMock })
    );
    done();
  });
});

Feature Creator Enhancements 🤩

The createFeature function now allows adding additional selectors to the feature object using the extraSelectors factory.

import { createFeature, createReducer } from '@ngrx/store';

import { User } from './user.model';

type State = { users: User[]; query: string };

const initialState: State = {
  users: [],
  query: '',
};

export const usersFeature = createFeature({
  name: 'users',
  reducer: createReducer(initialState, /* case reducers */),
  // 👇 adding extra selectors to the `usersFeature` object
  extraSelectors: ({ selectUsers, selectQuery }) => ({
    selectFilteredUsers: createSelector(
      selectUsers,
      selectQuery,
      (users, query) =>
        users.filter((user) => user.name.includes(query)),
    ),
  }),
});

The extraSelectors factory can also be used to add derived entity selectors to the feature object in a simple and elegant way.

import { createFeature, createReducer } from '@ngrx/store';
import { createEntityAdapter } from '@ngrx/entity';

import { User } from './user.model';

const adapter = createEntityAdapter<User>();
const initialState = adapter.getInitialState();

export const usersFeature = createFeature({
  name: 'users',
  reducer: createReducer(initialState, /* case reducers */),
  // 👇 adding entity selectors to the `usersFeature` object
  extraSelectors: ({ selectUsersState }) =>
    adapter.getSelectors(selectUsersState)
});

Special thanks to Armen Vardanyan for writing documentation for this feature!

Action Group Creator Improvements 👌

We received great feedback on the createActionGroup function so far. It provides a better developer experience and significantly reduces lines of code in action files. However, when event names are defined in title case format, it can be challenging to search for unused action creators because their names are automatically generated by camel-casing the event names.

In v16, the createActionGroup function provides the ability to define event names in the camel case format as well, so action creators will have the same names as events. This makes it easier to search for their usage within the codebase.

import { createActionGroup } from '@ngrx/store';

import { User } from './user.model';

export const UsersApiActions = createActionGroup({
  name: 'Users API',
  events: {
    usersLoadedSuccess: props<{ users: User[] }>(),
    usersLoadedFailure: props<{ errorMsg: string }>(),
  },
});

// generated action creators:
const {
  usersLoadedSuccess, // type: "[Users API] usersLoadedSuccess"
  usersLoadedFailure, // type: "[Users API] usersLoadedFailure"
} = UsersApiActions;

Enhanced Schematics and Standalone Support 🚀

In the last few major releases, many enhancements and new features have been added to the NgRx framework. However, the @ngrx/schematics package hadn't received significant updates.

In version 16, NgRx Schematics have been improved and now use the latest features, such as createFeature and createActionGroup, thanks to the contributions of Marco Endres!

But that's not all! In addition to these improvements, version 16 also introduces the ability to add NgRx packages to standalone Angular applications using the ng add command. For example, we can now add the @ngrx/store package with initial configuration to a standalone Angular application by running the following command:

ng add @ngrx/store

Similarly, we can add other NgRx packages, such as @ngrx/effects, @ngrx/store-devtools, and @ngrx/router-store to standalone applications using the ng add command.

Huge thanks to Dmytro Mezhenskyi for contributing to this feature!

Simplified View Model Selectors 🪄

The createSelector function now accepts a dictionary of selectors as an input and returns a dictionary of state slices selected by the provided selectors as a result. This feature simplifies the creation of view model selectors by reducing repetitive code in projector functions.

import { createSelector } from '@ngrx/store';

// before:
export const selectUsersPageViewModel = createSelector(
  selectFilteredUsers,
  selectActiveUser,
  selectQuery,
  selectIsLoading,
  (users, activeUser, query, isLoading) => ({
    users,
    activeUser,
    query,
    isLoading,
  })
);

// after:
export const selectUsersPageViewModel = createSelector({
  users: selectFilteredUsers,
  activeUser: selectActiveUser,
  query: selectQuery,
  isLoading: selectIsLoading,
});

New tapResponse Signature 😎

The tapResponse operator has a new signature that allows us to provide the observer object as an input argument, along with the finalize callback. Using this new signature, we can simplify the code and make it more readable.

import { inject, Injectable } from '@angular/core';
import { exhaustMap } from 'rxjs';
import { ComponentStore, tapResponse } from '@ngrx/component-store';

import { UsersService } from './users.service';
import { User } from './user.model';

type UsersState = { users: User[]; isLoading: boolean };

@Injectable()
class UsersStore extends ComponentStore<UsersState> {
  private readonly usersService = inject(UsersService);

  readonly loadUsers = this.effect<void>(
    exhaustMap(() => {
      this.patchState({ isLoading: true });

      return this.usersService.getAll().pipe(
        tapResponse({
          next: (users) => this.patchState({ users }),
          error: console.error,
          // 👇 set loading to false on complete or error
          finalize: () => this.patchState({ isLoading: false }),
        })
      );
    })
  );
}

Standalone Component APIs 😍

LetDirective and PushPipe are standalone in version 16, so we can directly add them to the imports of a standalone component or NgModule, instead of using LetModule and PushModule.

import { Component } from '@angular/core';
import { LetDirective, PushPipe } from '@ngrx/component';

@Component({
  // ... other metadata
  standalone: true,
  imports: [
    // ... other imports
    LetDirective,
    PushPipe,
  ],
})
export class UsersComponent {}

We would like to thank Stefanos Lignos for contributing to this feature!

New Router Selector 🤘

We've added a new router selector that selects the route data property by name.

import { createSelector } from '@ngrx/store';
import { getRouterSelectors } from '@ngrx/router-store';

const { selectRouteDataParam } = getRouterSelectors();

export const selectFullNameFromRoute = createSelector(
  selectRouteDataParam('firstName'),
  selectRouteDataParam('lastName'),
  (firstName, lastName) => `${firstName} ${lastName}`
);

Many thanks to Samuel Fernández for contributing to this feature!

NgRx SignalStore 💡

We've recently opened an RFC for a new state management solution that will provide first-class support for Angular Signals. The design of the SignalStore APIs is still under consideration, so we'd love to hear your thoughts! If you're interested, take a look and let us know what you think.

Deprecations and Breaking Changes 💥

Take a look at the version 16 migration guide for complete information regarding migrating to the latest release. The complete CHANGELOG can be found in our GitHub repository.

Upgrading to NgRx 16 🗓️

To start using NgRx 16, make sure to have the following minimum versions installed:

Angular version 16.x
Angular CLI version 16.x
TypeScript version 5.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

If your project uses @ngrx/component-store, but not @ngrx/store, run the following command:

ng update @ngrx/component-store

Enterprise Support 👨‍🏫

The NgRx collection of libraries will always remain open-source, MIT-licensed, and free to use. At the same time, we hear from companies that designing high-quality architecture could be challenging and additional help and guidance are needed.

Participating members of the NgRx team now offer paid support for those interested in NgRx workshops, training on best practices, architecture review, and more.

Visit our Enterprise Support page to learn more.

Swag Store and Discord Server 🦺

Join our Discord server for those who want to engage with other members of the NgRx community, old and new.

Contributing to NgRx 🥰

Thanks to all our contributors and sponsors!

NgRx continues to be a community-driven project. Design, development, documentation, and testing all are done with the help of the community. We've recently added a community section to the NgRx team page that lists every person that has contributed to the platform.

We would like to thank the contributors that helped to work towards this release of NgRx: Andreas Pramendorfer, André Escocard, Andrés Villanueva, Armen Vardanyan, Ben Lesh, briannarenni, Cameron Maunder, coder925, CoranH, Cédric Duffournet, Daniel Sogl, Dmytro Mezhenskyi, Fabien Wautriche, Fábio Englert Moutinho, Jerome Wirth, Jobayer Ahmed, jonz94, Jovan Mitrović, Kyler Johnson, Laforge Thomas, Manuel A Martin Callejo, Manuel Geier, Marco Endres, Michael Egger-Zikes, Mike Drakoulelis, naticaceres, Samruddhi Khandale, Samuel Fernández, Soumya Kushwaha, Stefanos Lignos, Taylor Ackley, Thomas Waldbillig, zakaria-bali, zbarbuto.

We want to give a big thanks to our Silver sponsor, Nx! Nx has been a longtime promoter of NgRx as a tool for building large Angular applications, and is committed to supporting open source projects that they rely on.

We also want to thank our Bronze sponsor, House of Angular!

Sponsor NgRx 💰

We are looking for our next Gold sponsor, so if your company wants to sponsor the continued development of NgRx, please visit our GitHub Sponsors page for different sponsorship options, or contact us directly to discuss other sponsorship opportunities.

Announcing NgRx v15: Standalone APIs, Type-safe projectors, Component and ComponentStore updates, and more!

Brandon Roberts — Tue, 29 Nov 2022 16:11:53 +0000

We are pleased to announce the latest major version of the NgRx framework with some exciting new features, bug fixes, and other updates.

Standalone APIs for NgRx Libraries 🧙

Angular v14 introduced standalone features for components, pipes, and directives allow you to build Angular applications with NgModules primarily being optional. In Angular v15, the standalone APIs are no longer in developer preview.

To improve support for standalone features, all NgRx libraries that register functionality in Angular have an equivalent provide* API for compatibility with building Angular applications with standalone features. Let's take a look at the new APIs.

Root-level providers:

boostrapApplication(AppComponent, {
  providers: [
    provideStore(),
    provideEffects(AppEffects),
    provideStoreDevtools(),
    provideRouterStore(),
    provideEntityData(config, withEffects())
  ]  
});

In lazy-loaded features, such as route configs:

[
  {
    path: 'products',
    component: ProductsPageComponent,
    providers: [
      provideState(productsFeature),
      provideEffects(ProductsEffects)
    ]
  }
]

Thanks to Jay Bell, Santosh Yadav, and others for their help in contributing to these new APIs.

Check out Tim's latest blog post on how NgRx APIs has evolved over time and how you can take advantage of them.

Announcing Enterprise Support 👨‍🏫

Participating members of the NgRx team now offer paid support for those interest in NgRx workshops, training on best practices, architecture review, and more.

Visit our Enterprise Support page to learn more.

NgRx Component marked as stable ✍

The NgRx Component package brings more reactivity to templates in Angular, along with providing support for fully zone-less Angular applications. NgRx Component provides two main features, the ngrxPush pipe and ngrxLet directive for more easily using observables in Angular component templates.

In version 14, team member Marko Stanimirović completely rewrote the component package from the ground up to provide a more consistent way to handle observable and static data, improved performance for zone-less applications in Angular, and more. In version 15, the component package is no longer marked as experimental and is now marked as stable for developers to take advantage of with full support.

A new feature also added to @ngrx/component is the ability to pass a dictionary of observables in the template with the ngrxLet directive. A view model object is created from the observables provided.

<ng-container *ngrxLet="{ users: users$, query: query$ } as vm">
  <app-search-bar [query]="vm.query"></app-search-bar>
  <app-user-list [users]="vm.users"></app-user-list>
</ng-container>

Read this post to learn more about NgRx Component.

Strict Type-safety For the Selector Projector 🔒

When testing selectors built with NgRx Store, the projector function is a way to provide inputs to a selector and assert against the result. Previously the projector function allowed the arguments passed to it to be less strict, and was not inferred from the selector itself. With version 15, the projector function is now strictly typed out of the box, allowing for more type safety about the inputs passed into the selector.

The projector is strict by default, but can be bypassed with an any type assertion to specify a less specific type.

const mySelector = createSelector(
  () => 'one',
  () => 2,
  (one, two) => 3
);

// Type is projector(s1: string, s2: number): number
mySelector.projector(); // <-- Results in type error.

To opt-out of the new behavior, cast the projector function itself.

const mySelector = createSelector(
  () => 'one',
  () => 2,
  (one, two) => 3
)

(mySelector.projector as any)();

Thanks to David Shortman for contributing to this feature.

Simplified View Models with ComponentStore ✨

Creating view models is a recommended way to consolidate multiple streams in a clean API to provide to your components. ComponentStore allows you to easily compose these streams from multiple sources. To further improve this, we've added a new signature to the ComponentStore.select method that allows you to provide a dictionary of observables, and an observable dictionary of those values is returned.

Before the new method, the ComponentStore projector was a repeat of its inputs.

readonly vm$: Observable<SomeViewModel> = this.select(
  this.selectedTab$,
  this.routerStateService.baseListRoute$,
  this.secondaryNavigationItems$,
  this.isFlaggedPage$,
  this.pageTitle$,
  this.hasError$,
  this.errorMessage$,
  (
    selectedTab,
    baseRoute,
    secondaryNavTabs,
    isFlaggedPage,
    pageTitle,
    hasError,
    errorMessage,
  ) => ({
    selectedTab,
    baseRoute,
    secondaryNavTabs,
    isFlaggedPage,
    pageTitle,
    hasError,
    errorMessage,
  }),
  { debounce: true },
);

The new select signature makes this much more concise.

readonly vm$: Observable<SomeViewModel> = this.select({
  selectedTab: this.selectedTab$,
  baseRoute: this.routerStateService.baseListRoute$,
  secondaryNavTabs: this.secondaryNavigationItems$,
  isFlaggedPge: this.isFlaggedPage$,
  pageTitle: this.pageTitle$,
  hasError: this.hasError$,
  errorMessage: this.errorMessage$,
}, { debounce: true });

We also plan to add support for providing a dictionary to selectors in NgRx Store.

Swag store and Discord Server! 👕

Join our discord server for those who want to engage with other members of the NgRx community, old and new.

Deprecations and Breaking Changes 💥

Take a look at the version 15 migration guide for complete information regarding migrating to the latest release. The complete CHANGELOG can be found in our GitHub repository.

Upgrading to NgRx 15 🗓️

To start using NgRx 15, make sure to have the following minimum versions installed:

Angular version 15.x
Angular CLI version 15.x
TypeScript version 4.8.x
RxJS version ^6.5.x or RxJS version ^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

Contributing to NgRx 🥰

Thanks to all our contributors and sponsors

Sponsor NgRx 💲

We want to give a big thanks to our Silver sponsor, Narhwal Technologies! Nrwl has been a longtime promoter of NgRx as a tool for building large Angular applications, and is committed to supporting open source projects that they rely on for Nx.

You should take advantage of the improved NgRx APIs

Tim Deschryver — Fri, 11 Nov 2022 09:18:05 +0000

Follow me on Twitter at @tim_deschryver | Subscribe to the Newsletter | Originally published on timdeschryver.dev.

Over the past years, TypeScript has become more powerful. Especially when it comes to its type system, in other words, how smart Typescript is.
With every new release, there's always one or more features that make it easier to write better code.

This is something that NgRx leverages to its full potential.
NgRx uses new TypeScript features to build type-safe state management libraries, which makes NgRx easier to use and shortens the feedback loop to detect problems earlier.

Sadly, keeping up with everything is time-consuming, and a lot of examples are outdated.
I hope that this post helps you to get to discover (and use) the latest APIs that NgRx has to offer.

Most of these tips and tricks are available as rules in the NgRx ESLint Plugin.
Some updated APIs also have an automatic migration that is run via the ng-update command, other might have an ESLint fixer to refactor the code to the (newer) recommended syntax.

Let's start off at the base of NgRx, Actions.

Actions

You can take a look at the documentation to learn more about Actions.

We can summarize this section into one sentence, stop defining actions as classes.

import { Action } from "@ngrx/store";

export enum CustomerPageActionTypes {
    CustomersLoaded = '[Customers Page] Customers Loaded',
    CustomerDetailLoaded = '[Customers Page] Customer Detail Opened'
}

// Action without payload
export class CustomersLoaded implements Action {
    readonly type = CustomerPageActionTypes.CustomersLoaded;
}

// Action with payload
export class CustomerDetailLoaded implements Action {
    readonly type = CustomerPageActionTypes.CustomerDetailLoaded;
    constructor(public payload: { customerId: string }) {}
}

export type CustomerPageActions = CustomersLoaded | CustomerDetailLoaded;

While it's still supported, NgRx has a more robust way to define actions.

Previously, the above snippet was the way to define actions in NgRx because it was the only way to keep reducers type-safe (more on this in reducers).

In the newer version(s) of NgRx (v8+), we can now use the createAction method to define actions.
This way is less error-prone, and is also automatically type-safe.

The equivalent of the above snippet can be refactored to the following actions.

import { createAction, props } from "@ngrx/store";

// Action without props (payload)
export const customersLoaded = createAction("[Customers Page] Customers Loaded");

// Action with props (payload)
export const customerDetailLoaded = createAction(
    "[Customers Page] Customer Detail Opened",
    props<{ customerId: string }>()
);

Also, it's important to notice that we aren't required to define the CustomerPageActions union type anymore.

Since NgRx v14, it's possible to group actions that share the same source with createActionGroup.
The only caveat is that you can't use your IDE refactoring tools to rename the action or to find all its occurrences, but on the other hand, this shouldn't be a problem.

We can detect where an action is dispatched by looking at its source, and renaming an action (event) should be a rare occasion - I would prefer to create a new action in this case because it mostly means that it's another unique event.

import { createActionGroup, emptyProps, props } from "@ngrx/store";

export const CustomerPageActions = createActionGroup({
    source: "Customers Page",
    events: {
      // Action without props
      'Customers Loaded': emptyProps(),
      // Action with props
      'Customer Detail Opened': props<{ customerId: string }>(),
    },
});

// Generates the following actions that can be dispatched
CustomerPageActions.customerDetailOpened({ customerId: 'CUST-123' });
CustomerPageActions.customersLoaded()

Reducers

You can take a look at the documentation to learn more about Reducers.

We've seen how to create actions, let's take a look at how these are consumed in reducers.

The reducer is a "simple" function that receives the current state, and the dispatched action.
Within the reducer, there's a switch statement to handle the proper state updates.

To make the reducer type safe the dispatched action needs to be annotated with the action union type.
When a reducer handles actions from different sources, all union types need to imported.

Within a case block, action has the correct type.

It's very important to add a default case to return the state as-is for the actions that aren't consumed by the reducer.
If you don't do this, the state is cleared (state will be undefined).

import { CustomerPageActions, CustomerPageActionTypes } from "./customer-page.actions";

const initialState = {
    customers: [],
    selectedCustomerId: null
};

export function customersReducer(state = initialState, action: CustomerPageActions) {
  switch (action.type) {
    case CustomerPageActionTypes.CustomersLoaded:
        return { ...state, customers: [] };
    case CustomerPageActionTypes.CustomerDetailLoaded:
        return { ...state, selectedCustomerId: action.payload.customerId };
    default:
      return state;
  }
}

In other words, to make the reducer type-safe we have to manually create additional types.

From NgRx v8, this isn't the case anymore.
There's a better way to define reducers compared to the reducer method, which is createReducer.

Instead of the reducer method with switch cases, we now have:

createReducer to replace the reducer method
the on method to listen for one or multiple action(s), replacing a switch case

Again, the main benefit of this approach is that it's more robust and type-safe by default (without additional steps).

The refactored version using createReducer looks like this.

import { createReducer, on } from "@ngrx/store";
import { customersLoaded, customerDetailLoaded } from "./customer-page.actions";

const initialState = {
    customers: [],
    selectedCustomerId: null
};

export const customersReducer = createReducer(
  initialState,
  on(customersLoaded, (state) => ({ ...state, customers: [] })),
  on(customerDetailLoaded, (state, action) => ({ ...state, selectedCustomerId: action.customerId  }))
);

The same reducer, but with actions created with createActionGroup uses the CustomerPageActions group instead of the loose actions.

import { createReducer, on } from "@ngrx/store";
import { CustomerPageActions } from "./customer-page.actions";

const initialState = {
    customers: [],
    selectedCustomerId: null
};

export const customersReducer = createReducer(
    initialState,
    on(CustomerPageActions.CustomersLoaded, (state) => ({ ...state, customers: [] })),
    on(CustomerPageActions.CustomerDetailLoaded, (state, action) => ({ ...state, selectedCustomerId: action.customerId  }))
);

The only downside is that createReducer doesn't support a default case.

To take it a step further, we can use the createFeature method, which is introduced in NgRx v12.1.
With it, the reducer is wrapped in a feature (more on this in Registering the Store).
But more important, a default set of selectors are generated based on the state properties.

import { createReducer, on, createFeature } from "@ngrx/store";
import { CustomerPageActions } from "./customer-page.actions";

const initialState = {
    customers: [],
    selectedCustomerId: null
};

const customersFeature = createFeature({
  name: "customers",
  reducer: createReducer(
      initialState,
      on(CustomerPageActions.CustomersLoaded, (state) => ({ ...state, customers: [] })),
      on(CustomerPageActions.CustomerDetailLoaded, (state, action) => ({ ...state, selectedCustomerId: action.customerId  }))
  ),
});

// Automatically generates the following selectors:
customersFeature.selectCustomersState
customersFeature.selectCustomers
customersFeature.selectSelectedCustomerId

Selectors

You can take a look at the documentation to learn more about Selectors.

Selectors remained the same throughout the NgRx versions, so there's not much to say about them.
The only tip that I want to mention is that some part of the state can be persisted in the URL and shouldn't be duplicated in the store.
Instead, you can make use of the selectors provided by @ngrx/router-store.

Registering the Store

Instead of creating a global application state, AppState in most cases, I prefer to not have a global state defined.
This has several benefits. The biggest one is that we can remove a layer of complexity, and keep all state levels equal.
Combining multiple slices of the state into a single object, being as a global state or feature state, is also a common source where things can get wrong (especially when using the older syntaxes we've covered above).

So why not avoid this complexity and keep things consistent?

To achieve this, register the global store in the root module, without providing a state.
Then, register each slice as a separate feature.

import { NgModule } from "@angular/core";
import { StoreModule } from "@ngrx/store";
import { customersReducer } from "./customers.reducer";
import { ordersFeature } from "./orders.feature";

@NgModule({
    imports: [
        // in NgRx 15 it isn't required to provide a state object
        StoreModule.forRoot(),
        // register the reducer
        StoreModule.forFeature("customers", customersReducer),
        // register the feature, this uses the feature name defined in createFeature
        StoreModule.forFeature(ordersFeature),
    ],
})
export class AppModule {}

We can then re-use the same pattern in the feature modules.

import { NgModule } from "@angular/core";
import { StoreModule } from "@ngrx/store";
import { shipmentFeature } from "./shipment.feature";

@NgModule({
    imports: [
      StoreModule.forFeature(shipmentFeature)
    ],
})
export class FeatureModule {}

In NgRx v15, there's a new way to register the Store when you're using the standalone components API.
With provideStore you can register the NgRx store (and register the root state), and with provideState you can provide feature states.

import { bootstrapApplication } from '@angular/platform-browser';
import { provideStore, provideState } from '@ngrx/store';
import { feature } from './feature.state';

bootstrapApplication(AppComponent, {
    providers: [
        provideStore(),
        provideState(feature)
    ];
})

And in a feature:

import { Routes } from '@angular/router';
import { provideState } from '@ngrx/store';
import { FeatureComponent } from './feature.component';
import { feature } from './feature.state';

export const routes: Routes = [
    {
        path: '',
        component: FeatureComponent,
        providers: [
            provideState(feature)
        ],
    },
];

Effects

You can take a look at the documentation to learn more about Effects.

Even if it's deprecated since NgRx v11, I still see projects that use the @Effect decorator.

Heads-up: the @Effect decorator is going to be removed in NgRx v15.

import { Injectable } from "@angular/core";
import { concatMap } from "rxjs";
import { Actions, Effect, ofType } from "@ngrx/effects";
import { CustomerPageActionTypes, CustomersLoaded } from "./customer.actions";

@Injectable()
export class CustomerEffects {
  @Effect()
  customerss$ = this.actions$.pipe(
    ofType<CustomersLoaded>(CustomerPageActionTypes.CustomersLoaded),
    concatMap(() => ...)
  );

  constructor(private actions$: Actions<CustomerPageActionTypes>) {}
}

This code snippet has multiple shortcomings.
First, an Effect should always return an action, using @Effect doesn't make sure of this.
Second, to have an effect that knows the signature of the handled action, either the Actions needs to be typed by providing the action union generic, or the ofType operator needs to use a generic of the handled action.

But, of course, we can do better with the updated API.
The above code can be refactored to use the createEffect method.
This solves both shortcomings of @Effect as it ensures that the effect returns an action (instead of all types), and the action is also automatically typed.

import { Injectable } from "@angular/core";
import { concatMap } from "rxjs";
import { Actions, createEffect, ofType } from "@ngrx/effects";
import { CustomerPageActions } from "./customer.actions";

@Injectable()
export class CustomerEffects {
  customers$ = createEffect(() => {
    // we use a body instead of a one-liner
    // this makes it easier to find errors in the RxJS stream
    // https://ngrx.io/guide/eslint-plugin/rules/prefer-effect-callback-in-block-statement
    return this.actions$.pipe(
      ofType(CustomerPageActions.CustomersLoaded),
      concatMap(() => ...)
    );
  });

  constructor(private actions$: Actions) {}
}

Notice that we don't need to provide a type to the injected Actions, nor to ofType operator.

In NgRx v15, there's a new way to register your Effects when you're using the standalone components API.
Instead of EffectsModule.forRoot([]) and EffectsModule.forFeature([]), there is the new provideEffects method that can be used to register your root and feature effects.

import { bootstrapApplication } from '@angular/platform-browser';
import { provideStore, provideState } from '@ngrx/store';
import { AppEffects } from './app.effects';

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

And in a feature:

import { Routes } from '@angular/router';
import { provideState } from '@ngrx/store';
import { FeatureComponent } from './feature.component';
import { FeatureEffects } from './feature.effects';

export const routes: Routes = [
    {
        path: '',
        component: FeatureComponent,
        providers: [
            provideEffects(FeatureEffects),
        ],
    },
];

Injecting the Store

To select a slice of the state, or to dispatch an action, the Store instance needs to be injected.
In contrast to the first NgRx versions, when it was required to provide a state generic to the Store, this has become optional in NgRx v9.

If you're using selectors (which you should be), adding a generic only raises confusion and thus is considered as a bad practice.
Instead, simply inject the Store without a generic.

By doing this, you won't lose the type-safety NgRx provides, as the selectors provide the type-safety that is needed.

import { Component } from "@angular/core";
import { Store } from "@ngrx/store";
import { selectCustomers } from "./customer.selector";

@Component({
  selector: "app-customers",
  template: `...`,
})
export class CustomersComponent {
    customers$ = this.store.select(selectCustomers);

    constructor(private store: Store) {}
}

Component Store

It's important to know that not everything needs to be in the global store.
Sometimes it's better to keep the state local to the component.
This is where the Component Store, @ngrx/component-store, comes in.
For a comparison between the Component Store and the Global Store, and when to use which, take a look at the documentation.

Since the introduction of component-store in NgRx v9.2 not a lot has changed about its API, but the existing API have had a couple of small improvements.

The biggest improvement in NgRx v15, is that selectors can easily be combined into a model.

- readonly vm$ = this.select(
-     this.customers$,
-     this.selectedCustomer$,
-     this.orders$,
-     (
-         customers,
-         selectedCustomer,
-         orders,
-     ) => ({
-         customers,
-         selectedCustomer,
-         orders,
-     }),
- );

+ readonly vm$ = this.select({
+   customers: this.customers$,
+   selectedCustomer: this.selectedCustomer$,
+   orders: this.orders$,
+ });

Follow me on Twitter at @tim_deschryver | Subscribe to the Newsletter | Originally published on timdeschryver.dev.

Announcing NgRx v14: Action Groups, ComponentStore Lifecycle Hooks, ESLint package, Revamped NgRx Component, and more!

Brandon Roberts — Mon, 20 Jun 2022 15:21:35 +0000

We are pleased to announce the latest major version of the NgRx framework with some exciting new features, bug fixes, and other updates.

New Function to Create Action Groups 🧙

If you're familiar with NgRx Store, you know that actions are an important part of the application that uses it. Some might say actions are the gluten of the NgRx loaf 😉, but that's a story for another day. In NgRx 13.2, we introduced the new createActionGroup function that was initially thought of by Mike Ryan and implemented by Marko Stanimirović as a way to make creating actions even easier.

The video below gives a quick overview of writing actions separately with Good Action Hygiene™, and introduces the new createActionGroup function to minimize the amount of code to write and export groups of actions.

The createActionGroup function makes use of more advanced features that have been introduced in TypeScript, so if you're into advanced TypeScript, definitely check out the source code to find some new tricks there.

Component Store Lifecycle Hooks 🎣

The NgRx ComponentStore library has been gaining popularity because of its features to manage state reactively in Angular applications more consistently and predictably. Using ComponentStore allows you to abstract away the business logic out of your components when update state, performing side effects, and providing observable streams of state changes.

There are some use cases where you need to perform some task when the ComponentStore is created, or when the ComponentStore state is first initialized. Previously to do this, you had to expose some method on the ComponentStore and call it from the Component's lifecycle method. To simplify this, we've introduced two interfaces and lifecycle hooks for ComponentStore, OnStoreInit and OnStateInit.

OnStoreInit

The OnStoreInit interface is used the implement the ngrxOnStoreInit method in the ComponentStore class. This lifecycle method is called immediately after the ComponentStore class is instantiated.

export interface BooksState {
  collection: Book[];
}

export const initialState: BooksState = {
  collection: []
};

@Injectable()
export class BooksStore extends ComponentStore<BooksState> implements OnStoreInit {

  constructor() {
    super(initialState);
  }

  ngrxOnStoreInit() {
    // called after store has been instantiated
  }
}

And use the provideComponentStore() function to register the ComponentStore in the providers array.

@Component({
  // ... other metadata
  providers: [
    provideComponentStore(BooksStore)
  ]
})
export class BooksPageComponent {
  constructor(private booksStore: BooksStore) {}
}

OnStateInit

The OnStateInit interface is used the implement the ngrxOnStateInit method in the ComponentStore class. This lifecycle method is called only once after the ComponentStore state is initially set. ComponentStore supports eager and lazy initialization of state, and the lifecycle hook is called appropriately in either scenario.

Eager State Init

export interface BooksState {
  collection: Book[];
}

export const initialState: BooksState = {
  collection: []
};

@Injectable()
export class BooksStore extends ComponentStore<BooksState> implements OnStateInit {
  constructor() {
    // eager state initialization
    super(initialState);
  }

  ngrxOnStateInit() {
    // called once after state has been first initialized
  }
}

@Component({
  // ... other metadata
  providers: [
    provideComponentStore(BooksStore)
  ]
})
export class BooksPageComponent {
  constructor(private booksStore: BooksStore) {}
}

### Lazy State Init


export interface BooksState {
  collection: Book[];
}

@Injectable()
export class BooksStore extends ComponentStore<BooksState> implements OnStateInit {
  constructor() {
    super();
  }

  ngrxOnStateInit() {
    // called once after state has been first initialized
  }
}

export const initialState: BooksState = {
  collection: []
};

@Component({
  // ... other metadata
  providers: [
    provideComponentStore(BooksStore)
  ]
})
export class BooksPageComponent implements OnInit {
  constructor(private booksStore: BooksStore) {}

  ngOnInit() {
    // lazy state initialization
    this.booksStore.setState(initialState);
  }
}

If you implement the lifecycle hooks in the ComponentStore, and register it with providers without using provideComponentStore(), in development mode, a warning is logged to the browser console.

Native ESLint package 📦

The NgRx team has always been looking at better ways to encourage developers to use best practices when using NgRx libraries. Team member Tim Deschryver created the ngrx-eslint-plugin package to provide ESLint rules for best practices for applications built with NgRx. In a previous version of NgRx, we introduced adding the ngrx-eslint-plugin package to your package.json, and adding lint rules to your ESLint configuration.

ng add @ngrx/store

To provide a more integrated experience, we've moved the ngrx-eslint-plugin package into the main ngrx/platform repository, and have added a new @ngrx/eslint-plugin package for the ESLint rules. The package has already been stable for a while, and will now be more visible to developers using NgRx libraries with already available docs pages and ongoing support.

NgRx Component package overhauled ✍

The NgRx Component package has always had an ambitious goal, with that being a way to bring more reactivity to templates in Angular, along with providing support for fully zone-less Angular applications. Initially written by Michael Hladky, and ultimately turning into the @rx-angular/template library, @ngrx/component has been well received even while still being an experimental package.

NgRx Component provides two main features, the ngrxPush pipe and ngrxLet directive for more easily using observables in Angular component templates. For version 14, team member Marko Stanimirović has completely rewritten the component package from the ground up to provide a more consistent way to handle observable and static data, improved performance for zone-less applications in Angular, and more.

NgRx Component also introduces two new modules: LetModule and PushModule.

To use the new modules, import and add the LetModule or PushModule to the imports array in your standalone component or NgModule.

import { Component } from '@angular/core';
import { LetModule, PushModule } from '@ngrx/component';

@Component({
  // ... other metadata
  standalone: true,
  imports: [
    // ... other imports
    LetModule,
    PushModule
  ],
})
export class MyStandaloneComponent {}

These new NgModules allow for more granular usage of the ngrxPush pipe and ngrxLet directive, and paves the way to introduce standalone versions of these pipes and directives to take more advantage of the new standalone features introduced in Angular v14. Read this post to learn more about the NgRx Component updates in v14.

The future of NgRx in Angular 🌞

Angular v14 has introduced some exciting new features for components, pipes, and directives, a new "environment injector", and an updated inject() function for using Dependency Injection without directly using a constructor. The standalone features for components, pipes, and directives allow you to build Angular applications with NgModules primarily being optional.

As most NgRx libraries primarily are sets of providers, and don't provide UI components, this allows us to take a fresh look with these new standalone APIs to register NgRx providers in Angular applications without NgModules. Check out Marko's latest blog post on using NgRx in Angular with standalone features. The inject() function has been around for a while, but now provides expanded capabilities for composing functions that have access to inject dependencies without the constructor, and easier composition of extended classes.

While Angular standalone features are still in developer preview, we have proposed some new APIs for NgRx in our latest RFC. If you would like to have some input on future Angular applications built with NgRx, feel free to check out the RFC and share your thoughts.

Swag store and Discord Server! 👕

Join our discord server for those who want to engage with other members of the NgRx community, old and new.

Deprecations and Breaking Changes 💥

Take a look at the version 14 migration guide for complete information regarding migrating to the latest release. The complete CHANGELOG can be found in our GitHub repository.

Upgrading to NgRx 14 🗓️

To start using NgRx 14, make sure to have the following minimum versions installed:

Angular version 14.x
Angular CLI version 14.x
TypeScript version 4.7.x
RxJS version ^6.4.x or RxJS version ^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

Contributing to NgRx 🥰

Thanks to all our contributors and sponsors

Sponsor NgRx 💲

We are looking for our next Gold sponsor, so if your company wants to sponsor the continued development of NgRx, please visit our OpenCollective page for different sponsorship options, or contact us directly to discuss other sponsorship opportunities.

Building Reactive Angular Templates with NgRx Component

Marko Stanimirović — Sun, 19 Jun 2022 12:52:31 +0000

In this article, we'll look into the @ngrx/component library used to build reactive Angular templates in a performant way. It contains a set of declarables that are primarily used for rendering observable events and can work in both zone-full and zone-less mode.

Installation

To install the @ngrx/component package, run one of the following commands:

// Angular CLI
ng add @ngrx/component

// NPM
npm i @ngrx/component

// Yarn
yarn add @ngrx/component

Push Pipe

The ngrxPush pipe is used for displaying observable values in the template. To use it, import the PushModule to an Angular module or standalone component:

import { PushModule } from '@ngrx/component';

@Component({
  // ... other metadata
  standalone: true,
  imports: [
    // ... other imports
    PushModule,
  ],
})
export class ProductDetailsComponent {
  readonly product$ = this.store.select(selectActiveProduct);

  constructor(private readonly store: Store) {}
}

💡 PushModule is available since version 14. If you're using an older version of the @ngrx/component package, import the ReactiveComponentModule.

The ngrxPush pipe is an alternative to the async pipe and can be used in the following way:

<ngrx-product-form
  [product]="product$ | ngrxPush"
></ngrx-product-form>

Similar to the async pipe, the ngrxPush pipe returns the last emitted value of the passed observable or undefined if there are no emitted values. However, there are two key differences compared to the async pipe:

The ngrxPush pipe will not mark the host component as dirty when an observable emits the same values in a row.
The ngrxPush pipe will not mark the host component as dirty when an observable emits values synchronously.
The ngrxPush pipe will trigger change detection when an observable emits a new value in zone-less mode.

💡 Since version 14, the @ngrx/component package uses the global rendering strategy in both zone-full and zone-less mode. In previous versions, it used the native local rendering strategy in zone-less mode, which caused performance issues.

Let Directive

The *ngrxLet directive is used for rendering observable events in the template. To use it, import the LetModule to an Angular module or standalone component:

import { LetModule } from '@ngrx/component';

@Component({
  // ... other metadata
  standalone: true,
  imports: [
    // ... other imports
    LetModule,
  ],
})
export class ProductListComponent {
  readonly products$ = this.productsService.getProducts({ limit: 10 });
  readonly totalCount$ = this.productsService.getTotalCount();

  constructor(private readonly productsService: ProductsService) {}
}

💡 LetModule is available since version 14. If you're using an older version of the @ngrx/component package, import the ReactiveComponentModule.

The *ngrxLet directive can be used in the following way:

<ng-container *ngrxLet="totalCount$ as totalCount">
  <h2>Products ({{ totalCount }})</h2>

  <p *ngIf="!totalCount" class="info-alert">
    There are no products.
  </p>
</ng-container>

At first, it seems that we can achieve the same result using the *ngIf directive and async pipe:

<ng-container *ngIf="totalCount$ | async as totalCount">
  <h2>Products ({{ totalCount }})</h2>

  <p *ngIf="!totalCount" class="info-alert">
    There are no products.
  </p>
</ng-container>

However, the *ngIf directive will only create an embedded view if the totalCount is not zero (truthy value), but not if it is zero (falsy value). On the other hand, the *ngrxLet directive will create an embedded view when an observable emits a value, regardless of whether it is truthy or falsy.

Tracking Different Observable Events

The *ngrxLet directive provides the ability to display different content based on the current observable state. For example, we can display an error alert if an observable emits the error event:

<ng-container *ngrxLet="products$ as products; error as error">
  <ngrx-product-card
    *ngFor="let product of products"
    [product]="product"
  ></ngrx-product-card>

  <p *ngIf="error" class="error-alert">{{ error.message }}</p>
</ng-container>

💡 Displaying thrown error is possible since version 14. In previous versions, the value of error is true when the passed observable emits the error event.

In addition to error, we can also track the complete event:

<ng-container
  *ngrxLet="saveProgress$ as progress; complete as complete"
>
  <mat-progress-spinner
    [value]="progress"
    mode="determinate"
  ></mat-progress-spinner>

  <p *ngIf="complete" class="success-alert">
    Product is successfully saved!
  </p>
</ng-container>

Combining Multiple Observables

The *ngrxLet directive can be also used with a dictionary of observables. This feature provides the ability to create a view model object in the template:

<ng-container *ngrxLet="{ products: products$, query: query$ } as vm">
  <app-search-bar [query]="vm.query"></app-search-bar>
  <app-product-list [products]="vm.products"></app-product-list>
</ng-container>

💡 Combining multiple observables in the template using the *ngrxLet directive is available since version 15.

Using Suspense Template

Also, there is an option to pass the suspense template to the *ngrxLet directive:

<ng-container *ngrxLet="products$ as products; suspenseTpl: loading">
  <ngrx-product-card
    *ngFor="let product of products"
    [product]="product"
  ></ngrx-product-card>
</ng-container>

<ng-template #loading>
  <mat-spinner></mat-spinner>
</ng-template>

The suspense template will be rendered when the passed observable is in a suspense state. In the example above, the loading spinner will be displayed until the products$ observable emits a list of products. When this happens, the loading spinner will be removed from the DOM and products will be displayed.

💡 Using suspense template with the *ngrxLet directive is available since version 14.

Using Aliases for Non-Observable Values

In addition to observables and promises, the *ngrxLet directive can also accept static (non-observable) values as an input argument. This feature provides the ability to create readable templates by using aliases for deeply nested properties:

<ng-container *ngrxLet="productForm.controls.price as price">
  <input type="number" [formControl]="price" />

  <ng-container *ngIf="price.errors && (price.touched || price.dirty)">
    <p *ngIf="price.errors.required">Price is a required field.</p>
    <p *ngIf="price.errors.min">Price cannot be a negative number.</p>
  </ng-container>
</ng-container>

💡 Passing non-observable values to the *ngrxLet directive is available since version 14.

Summary

Many new and powerful features have been added in recent versions:

Separate modules for LetDirective and PushPipe
Displaying emitted error in the template
Using aliases for non-observable values
Combining multiple observables in the template
Handling suspense state in the template
Strong typing for LetDirective and PushPipe

Also, this library has been almost completely rewritten for better performance. If you haven't used it before, give it a try and let us know your impressions!

In version 15, the @ngrx/component package is no longer marked as experimental and is now marked as stable. By the way, it recently reached 30k downloads per week on NPM! 🎉

Resources

Official docs of the @ngrx/component package

Peer Reviewers

Big thanks to Brandon Roberts and Tim Deschryver for giving me helpful suggestions on this article!

DEV Community: NgRx

Announcing NgRx 21: Celebrating a 10 Year Journey with a fresh new look and @ngrx/signals/events

10 Year Anniversary 🎉

New Website 🎨

Welcome Rainer 🏆

The Events Plugin is stable 👏

The addition of Scoped Events

signalMethod and rxMethod accept a computation method

Updating to NgRx v21 🚀

A Big Thank You to Our Community! ❤️

Sponsor NgRx 🤝

What's Next?

Announcing NgRx v20: The Power of Events, Enhanced DX, and a Mature SignalStore!

A Modern Take on Flux: The Experimental Events Plugin 🚀

Announcing Events Plugin for NgRx SignalStore: A Modern Take on Flux Architecture

Method/Command-driven vs. Event-driven SignalStore

SignalStore Feature Enhancements

Enhanced Entity Management: prependEntity and upsertEntity 🧩

Powerful Composition with withFeature 🛠️

Introducing withLinkedState for Advanced Reactivity 🔗

Developer Experience and Tooling

Simplified Testing with @ngrx/signals/testing 🧪

Improved Code Quality with New ESLint Rule

Housekeeping and Future Direction

@ngrx/component Enters Maintenance Mode

SignalStore popularity

Getting Started with NgRx v20

A Big Thank You to Our Community! ❤️

Sponsor NgRx 🤝

Upcoming NgRx Workshops 🎓

What's Next?

Announcing Events Plugin for NgRx SignalStore: A Modern Take on Flux Architecture

Experimental Stage 🚧

Flux Architecture 🔄

Walkthrough 🛠️

Defining Events

Performing State Changes

Performing Side Effects

Reading State

Dispatching Events

Scaling Up

Key Takeaways 🔑

Upcoming NgRx Workshops 🎓

Thanks to All Our Contributors and Sponsors! 🏆

Sponsor NgRx 🤝

Announcing NgRx 19: NgRx Signals Features, Action Signals, and more!

Updated NgRx Signals Features🚦

New Props SignalStore Feature

Signal Method Utility Function

Development Mode Checks for State Mutations

NgRx Store Support for Dispatching Actions on Signal changes

NgRx Signals, the new Default 🤝

NgRx Workshops 🎓

New Docs site 💅

Deprecations and Breaking Changes 💥

Upgrading to NgRx 19 🗓️

Swag Store and Discord Server 🦺

Contributing to NgRx 🥰

Thanks to all our contributors and sponsors!

Announcing NgRx Signals v18: State Encapsulation, Private Store Members, Enhanced Entity Management, and more!

NgRx Signals Are Now Stable! 🎉

State Encapsulation 🔒

Ensuring Integrity of Store Members 👨‍⚕️

Private Store Members 🛡️

State Tracking 🕵

Enhanced Entity Management 🧩

selectId

entityConfig

Upgrading to NgRx Signals 18 🛠️

Upcoming NgRx Workshops 🎓

Welcoming New Additions to the NgRx Team 💪

Thanks to All Our Contributors and Sponsors! 🏆

Sponsor NgRx 🤝

Announcing NgRx 18: NgRx Signals is almost stable, ESLint v9 Support, New Logo and Redesign, Workshops, and more!

Stable NgRx Signals 🚦 (it's almost there)

ESLint Plugin support for ESLint v9 🧹

New NgRx Operators Package 🛠️

New Logo and Redesign of ngrx.io 💅

Deprecations and Breaking Changes 💥

Upgrading to NgRx 18 🗓️

`signalMethod` and `rxMethod` accept a computation method

Enhanced Entity Management: `prependEntity` and `upsertEntity` 🧩

Powerful Composition with `withFeature` 🛠️

Introducing `withLinkedState` for Advanced Reactivity 🔗

Simplified Testing with `@ngrx/signals/testing` 🧪

`@ngrx/component` Enters Maintenance Mode

`selectId`

`entityConfig`