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 @ngPoland
Search
Manfred Steyer
PRO
November 06, 2023
Programming
0
310
Angular Architectures with Signals @ngPoland
Manfred Steyer
PRO
November 06, 2023
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Angular Architecture Workshop @AngularDays in Berlin 2025
manfredsteyer
PRO
0
5
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
84
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
97
All About Angular's New Signal Forms
manfredsteyer
PRO
0
200
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
210
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
140
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
77
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
47
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
410
Other Decks in Programming
See All in Programming
AI Agent 時代的開發者生存指南
eddie
4
2k
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
理論と実務のギャップを超える
eycjur
0
170
技術的負債の正体を知って向き合う
irof
0
210
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
190
CSC509 Lecture 08
javiergs
PRO
0
220
Introduce Hono CLI
yusukebe
6
3k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
870
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
510
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
230
CSC305 Lecture 10
javiergs
PRO
0
200
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.9k
Featured
See All Featured
Leading Effective Engineering Teams in the AI Era
addyosmani
7
540
It's Worth the Effort
3n
187
28k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Visualization
eitanlees
149
16k
Unsuck your backbone
ammeep
671
58k
Six Lessons from altMBA
skipperchong
29
4k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Code Reviewing Like a Champion
maltzj
526
40k
Transcript
@ManfredSteyer ManfredSteyer Angular Architectures with Signals
@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
@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 @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
swap(): 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 }) }
@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 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