RxJS Patterns in Angular

on YouTube ↗19m

" summary

Shows concrete RxJS patterns for Angular apps using a sample products UI that actually fetches lists details and suppliers and demonstrates which operators make those flows correct and efficient. Uses async pipe to avoid manual subscribe/unsubscribe, recommends subjects or behavior subjects for action streams, and explains higher‑order mapping with switchMap, mergeMap and concatMap to flatten inner observables and cancel or parallelize requests. Uses combination operators like combineLatest and forkJoin and IDE type hovers to verify pipeline types.

AI-written summary · about

" chapters (13)

1. 0:00Start
2. 1:15Retrieving Data
3. 3:03The Async Pipe
4. 7:42Retrieve on Action Pattern
5. 9:14Higher Order Mapping Operator
6. 10:38Why Switch Map
7. 11:38Marble Diagram
8. 12:06Shape on Action Pattern
9. 12:43Pattern for an Action
10. 14:20Fork Join
11. 15:20Retrieve Related Data Pattern
12. 15:54Retrieve Related Data Pattern When There Is a One-to-One Relationship
13. 17:11Why Merge Map and Not Switch Map

" related talks

• 58mAngular and The Case for RxJSSandi Barr · NDC London 2020
• 37mReactive Programming with RxJSShmuela Jacobs · ReactiveConf 2017
• 53mRxJS Observables in AngularWard Bell, Sander Elias · NGConf 2018
• 45mReactive Frontends with RxJS and AngularSergi Almar · Voxxed Days Singapore 2018
• 34mCollect, Combine and Cache RxJS Streams for User-Friendly ResultsDeborah Kurata · ngVikings 2019
• 01h 07mReactive Frontends with RxJS and Angular - Sergi AlmarSergi Almar · SpringOne Platform 2017
• 13mAngular: Let's get Reactive!Wassim Chegham · Devoxx Belgium 2017
• 21mRxJS Best Practices Aren't Always Black and WhiteDeborah Kurata · ng-conf 2022