Signal Forms meet the Signal Store - ng-India 04/2026

ANGULARarchitects.io - Michael Egger-Zikes

A global state management layer in the frontend provides numerous benefits and clear boundaries within an Angular application. The framework is currently undergoing a wave of modernization, with the most important change being the introduction of Signal-based APIs. These reactive containers not only improve synchronization for browser rendering but are also ideally suited for managing application state.

The well-known third-party library NgRx Signals introduces the Signal Store, a lightweight state management solution designed around Angular’s Signal APIs. It helps to migrate applications into the modern Angular ecosystem. Its design is highly extensible through custom features and has recently been enhanced with the Event API, which allows Flux-style state management as an opt-in.

Now, the Angular team introduced the Signal Forms API – the third and likely soon most important form state management solution. In addition to being compatible with Angular’s existing two form concepts, Signal Forms offers several exciting new features and integrates seamlessly with Angular Signals.

But how can a modern global state management solution like the NgRx Signal Store work together with Angular’s Signal Forms API? In this session, with the help of live demos, you’ll see how the Signal Store and Signal Forms API can be combined in a modern Angular app. Developers will gain insights into how lightweight, signal-driven state management can be applied both globally and within templates using the Signal Forms API in real-world practice.

Transcript

1. Michael Egger-Zikes (@MikeZks) Michael Egger-Zikes ANGULARarchitects.io Signal Forms meet State Management
2. Michael Egger-Zikes (@MikeZks) Signal Forms Signal Store Signal Forms meet Signal Store Event API Delegated Signal
3. Michael Egger-Zikes (@MikeZks) • Michael Egger-Zikes ANGULARarchitects.io • Trainings, Consultancy, Reviews • Focus on Angular • Conference Speaker Public: in-person or remote In-House: everywhere angulararchitects.io /en/angular-workshops Michael Egger-Zikes @MikeZks About Michael
4. Michael Egger-Zikes (@MikeZks) Signals Forms • Experimental Stage → v21 • Pushes Forms State Management into the Signals world • Data Model: • Writable Signal • Field State: • form() adds metadata → valid, dirty, touched, disabled, etc. • Field Logic: • schema() → validators, readonly, disabled, hidden, etc. • UI Control: • Template Binding w/ FormField Directive → [formField]="editForm.status"
5. Michael Egger-Zikes (@MikeZks) DEMO Signal Forms
6. Michael Egger-Zikes (@MikeZks) Lightweight State - NgRx Signal Store • Signal Store Setup • export const CustomLocalStore = signalStore( { providedIn: 'root' }, // Optional withState<LocalState>(initialLocalState), withComputed(), withMethods() ); • providers: [CustomLocalStore] • localStore = inject(CustomLocalStore)
7. Michael Egger-Zikes (@MikeZks) DEMO Lightweight Signal Store
8. Michael Egger-Zikes (@MikeZks) NgRx Signals Events • Implements the Flux Pattern (close to Redux) • State Change & Side-Effects → dispatch Events • Read managed & derived State → Signals • Dependency Injection • Provide Store depending on desired Lifetime • Inject Store • Inject Events
9. Michael Egger-Zikes (@MikeZks) Dispatcher Booking Store App Booking Cmp Home Cmp Checkin Cmp booking tickets State State State Event Event Event Booking Reducer Event Single Immutable State Tree flights Signals loadFlights Effect saveFlight Effect Events Events Event Checkin Store checkin luggage Checkin Reducer passenger loadLuggage Effect savePassenger Effect Events Events Event
10. Michael Egger-Zikes (@MikeZks) NgRx Signals Events • Events instead of Actions export const checkinEvents = eventGroup({ source: 'Checkin', events: { passengerFilterChanged: type<{ firstName: string, name: string }>(), passengersChanged: type<Passenger[]>() } });
11. Michael Egger-Zikes (@MikeZks) NgRx Signals Events • Global Dispatching of Events export class PassengerSearchComponent { private store = inject(PassengerStore); private checkin = injectDispatch(checkinEvents); firstname = ''; lastname = 'Smith'; passengers = this.store.passengerEntities; search(): void { this.checkin.passengerFilterChanged({ firstName: this.firstname, name: this.lastname }); } }
12. Michael Egger-Zikes (@MikeZks) DEMO Event API
13. Michael Egger-Zikes (@MikeZks) How to connect Forms & State Mgmt? • Global State Management typically uses the Unidirectional Flow • Read State as Signal • Write by using a Method or Event • State Management does not offer Writable Signals
14. Michael Egger-Zikes (@MikeZks) DEMO Unidirectional Bindings
15. Michael Egger-Zikes (@MikeZks) Delegated Signal Connector Signal Store Signal Forms Writable Signal Delegated Signal Readonly Signal Updater Function
16. Michael Egger-Zikes (@MikeZks) DEMO Delegated Signal
17. Michael Egger-Zikes (@MikeZks) [web] ANGULARarchitects.io [twitter] Michael Egger-Zikes (@MikeZks) [repo] https://github.com/mikezks/ng-india-2026 Contact • Slides • Code Remote Workshops: Public & tailored to your company angulararchitects.io/en/training /reaktive-angular-architekturen-mit- rxjs-und-ngrx-redux/ Link mit einfarbiger Füllung