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
Angular Architectures with Signals
Search
Manfred Steyer
PRO
November 04, 2023
Programming
0
300
Angular Architectures with Signals
Manfred Steyer
PRO
November 04, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
110
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
470
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
340
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
120
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
170
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
320
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
210
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
100
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
構文解析器入門
ydah
7
1.9k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
リッチエディターを安全に開発・運用するために
unachang113
1
270
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
230
PHPカンファレンス関西2025 基調講演
sugimotokei
5
1k
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
11
2.8k
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
520
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.4k
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
200
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
160
What's new in Adaptive Android development
fornewid
0
120
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Making Projects Easy
brettharned
117
6.3k
4 Signs Your Business is Dying
shpigford
184
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
How GitHub (no longer) Works
holman
314
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Code Review Best Practice
trishagee
69
19k
Code Reviewing Like a Champion
maltzj
524
40k
Transcript
@ManfredSteyer ManfredSteyer Angular Architectures with Signals ANGULAR BELGRADE DAY 2023
@ManfredSteyer Signal as Producer 4711 Consumer read set notify 4712
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
private _flights = signal<Flight[]>([]); readonly flights = this._flights.asReadonly(); async load(from: string, to: string) { const flights = await […]; this._flights.set(flights); } }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
private _flights = signal<Flight[]>([]); readonly flights = this._flights.asReadonly(); async load(from: string, to: string) { const flights = await […]; this._flights.set(flights); } }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
private _flights = signal<Flight[]>([]); readonly flights = this._flights.asReadonly(); private _from = signal('Hamburg'); readonly from = this._from.asReadonly(); private _to = signal('Graz'); readonly to = this._to.asReadonly(); […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
private state = signal({ from: 'Hamburg', to: 'Graz', flights: [] as Flight[], […] }); […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
private state = signal({ from: 'Hamburg', to: 'Graz', flights: [] as Flight[], […] }); readonly flights = computed(() => this.state().flights); readonly from = computed(() => this.state().from); […] }
@ManfredSteyer
@ManfredSteyer select(selector) selectSignal(selector)
@ManfredSteyer
@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
@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 export const FlightBookingStore = signalStore( { providedIn: 'root' },
withState({ from: 'Paris', to: 'London', […] }), withSignals(([…]) => ({ […] })), withMethods(([…]) => ({ })), withHooks({ […] }), withCallState() );
@ManfredSteyer export const FlightBookingStore = signalStore( { providedIn: 'root' },
withState({ from: 'Paris', to: 'London', […] }), withSignals(([…]) => ({ […] })), withMethods(([…]) => ({ })), withHooks({ […] }), withCallState() );
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const BooksStore = signalStore( withEntities<Book>({ collection: 'book' }), withEntities<Author>({
collection: 'author' }) );
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer Services + Signals NGRX NGRX Signal Store Different Flavors
rxMethod Custom Features
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io