Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Leveraging the new NGRX Signal Store
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Manfred Steyer
PRO
January 18, 2024
Programming
0
290
Leveraging the new NGRX Signal Store
Manfred Steyer
PRO
January 18, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
manfredsteyer
PRO
0
88
Beyond the Basics: Signal Forms
manfredsteyer
PRO
0
62
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
130
All About Angular‘s New Signal Forms
manfredsteyer
PRO
0
29
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
260
Your Architecture as a Crime Scene?Forensic Analysis
manfredsteyer
PRO
0
180
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
280
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
130
Reactive Thinking with Signals and the new Resource API
manfredsteyer
PRO
0
250
Other Decks in Programming
See All in Programming
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
hisatake
0
290
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
6.1k
Best-Practices-for-Cortex-Analyst-and-AI-Agent
ryotaroikeda
1
110
AI時代の認知負荷との向き合い方
optfit
0
160
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
minodriven
21
7.4k
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
tetutetu214
2
120
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
AtCoder Conference 2025
shindannin
0
1.1k
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
1k
SourceGeneratorのススメ
htkym
0
200
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
180
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
A designer walks into a library…
pauljervisheath
210
24k
Scaling GitHub
holman
464
140k
So, you think you're a good person
axbom
PRO
2
1.9k
Are puppies a ranking factor?
jonoalderson
1
2.7k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.3k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
62
50k
Odyssey Design
rkendrick25
PRO
1
500
GitHub's CSS Performance
jonrohan
1032
470k
Test your architecture with Archunit
thirion
1
2.2k
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
110
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
590
Transcript
@ManfredSteyer ManfredSteyer Leveraging the new NGRX Signal Store
@ManfredSteyer Signal as Producer 4711 Consumer read set notify 4712
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { private
state = signalState({ from: 'Paris', to: 'London', flights: [] as Flight[], basket: {} as Record<number, boolean>, }); readonly flights = this.state.flights; readonly from = this.state.from; […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
readonly selected = computed( () => this.flights().filter((f) => this.basket()[f.id]) ); […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
updateCriteria(from: string, to: string): void { patchState(this.state, { from, to }) } […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
updateCriteria(from: string, to: string): void { patchState(this.state, (state) => ({ from: state.to, to: state.from })); } […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
updateCriteria(from: string, to: string): void { patchState(this.state, updateRoute(from, to)); } […] } function updateRoute<T>(from: string, to: string) { return (state: T) => ({ from: to, to: from }) }
@ManfredSteyer
@ManfredSteyer export const FlightBookingStore = signalStore( { providedIn: 'root' },
[…] );
@ManfredSteyer export const FlightBookingStore = signalStore( { providedIn: 'root' },
withState({ from: 'Paris', to: 'London', […] }), […] );
@ManfredSteyer export const FlightBookingStore = signalStore( { providedIn: 'root' },
withState({ from: 'Paris', to: 'London', […] }), withComputed(([…]) => ({ […] })), withMethods(([…]) => ({ })), withHooks({ […] }) );
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const BooksStore = signalStore( withEntities({ entity: type<Flight>(), collection: 'flight'
}), );
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Michael Egger-Zikes Rainer Hahnekamp Manfred Steyer
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer Services + Signals NGRX NGRX Signal Store Different Flavors
Custom Features Typed
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io