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
310
Angular Architectures with Signals
Manfred Steyer
PRO
November 04, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
All About Angular's New Signal Forms
manfredsteyer
PRO
0
130
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
170
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
130
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
67
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
42
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
400
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
660
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
530
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
180
Other Decks in Programming
See All in Programming
XP, Testing and ninja testing ZOZ5
m_seki
3
630
CSC305 Lecture 06
javiergs
PRO
0
220
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
440
開発生産性を上げるための生成AI活用術
starfish719
3
650
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
240
Cursorハンズオン実践!
eltociear
2
1k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
31k
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
820
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
310
止められない医療アプリ、そっと Swift 6 へ
medley
1
170
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.1k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Rails Girls Zürich Keynote
gr2m
95
14k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Building an army of robots
kneath
306
46k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
What's in a price? How to price your products and services
michaelherold
246
12k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
KATA
mclloyd
32
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Agile that works and the tools we love
rasmusluckow
331
21k
Typedesign – Prime Four
hannesfritz
42
2.8k
Gamification - CAS2011
davidbonilla
81
5.5k
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