Angular & RXJS: examples and use cases
21 likes•1,970 views
The document discusses using RxJS in Angular applications. It provides examples of using RxJS operators like interval, map, async pipe, filter, switchMap, exhaustMap, tap, scan, and reduce. Common use cases include handling events, making HTTP requests, managing application state, and manipulating data. RxJS can be used in components, directives, services, routing, forms, and more throughout an Angular application.
Angular & RXJS: examples and use cases
- 3. ANGULAR JAVASCRIPT REACT OPPORTUNITÀ per DEVELOPER ITALIANI (jobs / collaborations / training and more) FACEBOOK GROUPS developer italianideveloper italianideveloper italiani
- 4. RXJS-6-INTRO
- 5. interval(value) returns an observable sequence that produces a value after each period.
- 6. map(fn) transform the items emitted by an Observable by applying a function to each item
- 7. <fb-clock>
- 9. You don't need subscribe(fn)
- 10. {{myObs$ | async}} the async Angular pipe “I” automatically subscribes an observer
- 11. <fb-clock>
- 12. WHERE CAN YOU USE RXJS IN ANGULAR? ALMOST EVERYWHERE! In components, directives, pipes, services, XHR, router, guards, interceptors ...
- 13. ASync Pipes {{'Milano' | temperature | async }} // output: 20°
- 14. Router EVENTS
- 17. RxJS operators used in forms
- 18. Create Component at Runtime
- 19. HttpClient
- 20. HttpClient & map(fn) Leanne Graham ([email protected]) Transform HTTP response
- 21. forkJoin(array) Combine Multiple HTTP requests When all observables complete, emit the last emitted value from each.
- 22. switchMap Map to observable, complete previous inner observable, emit values.
- 23. ! NESTED XHR with switchMap(fn) Solution Sequential HTTP requests
- 24. exhaustMap(array) Abort new HTTP requests until the previous one has been completed
- 25. Services UserService: fetch data View: request and use data
- 26. perform actions or side-effects, such as logging. tap(fn) “Debug” and side effects with tap()
- 27. AUTHENTICATION
- 28. A value that changes over time BehaviorSubject Store authentication token
- 29. UI: SignInComponent SignIn by using LoginService
- 30. LoginService Invoke login REST Service and save token
- 31. SECURITY
- 32. *ifLogged Structural Directive Render DOM if user is logged Usage
- 33. AuthGuard Disable route access if user is not logged Usage
- 34. HTTP Interceptors Inject token to each XHR and handle errors
- 35. NGRX (Redux)
- 36. NGRX Store ! Too many subscriptions
- 38. NGRX Effects
- 40. 7: [email protected] 8: [email protected] 9: [email protected] 10: [email protected] FILTER ARRAY with map: easiest way Get user ID > 6 and email lowercase
- 41. X FILTER ARRAY WITH RXJS (1/3) Wrong Way
- 42. FILTER ARRAY WITH RXJS (2/3): flatten in single emissions Get user ID > 6 ! Too many. I just need one!
- 43. we only need to emit one value (3/3) Get user ID > 6 and email lowercase
- 44. scan & reduce
- 45. scan(fn) applies an accumulator function over an observable sequence and returns each intermediate result
- 46. reduce(fn) apply a function to each item emitted by an Observable, sequentially, and emit the final value
- 47. scan ! Too many. I just need one! Display the total of likes Given an array Display the total of likes
- 48. scan Display the total of likes Given an array Display the total of likes Yo! :)
- 50. <Clock> Picker
- 52. <ImageGallery> A simple carousel with timer and NEXT / PREV buttons
- 53. ! !
- 54. <ImageGallery> Enhanced version: get Token, HTTP requests and completely “pure”
- 56. ANGULAR JAVASCRIPT REACT OPPORTUNITÀ per DEVELOPER ITALIANI (jobs / collaborations / training and more) FACEBOOK GROUPS developer italianideveloper italianideveloper italiani
- 57. fabiobiondi.io