Uploaded byFabio Biondi
Angular & RXJS: examples and use cases
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
- 1.
- 2.
- 3. ANGULAR JAVASCRIPT REACT OPPORTUNITÀper DEVELOPER ITALIANI (jobs / collaborations / training and more) FACEBOOK GROUPS developer italianideveloper italianideveloper italiani
- 4.
- 5. interval(value) returns an observablesequence that produces a value after each period.
- 6. map(fn) transform the itemsemitted by an Observable by applying a function to each item
- 7.
- 8.
- 9. You don't needsubscribe(fn)
- 10. {{myObs$ | async}} theasync Angular pipe “I” automatically subscribes an observer
- 11.
- 12. WHERE CAN YOUUSE RXJS IN ANGULAR? ALMOST EVERYWHERE! In components, directives, pipes, services, XHR, router, guards, interceptors ...
- 13. ASync Pipes {{'Milano' |temperature | async }} // output: 20°
- 14.
- 15.
- 16.
- 17. RxJS operators usedin forms
- 18. Create Component atRuntime
- 19.
- 20. HttpClient & map(fn) LeanneGraham (Sincere@april.biz) Transform HTTP response
- 21. forkJoin(array) Combine Multiple HTTPrequests 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 withswitchMap(fn) Solution Sequential HTTP requests
- 24. exhaustMap(array) Abort new HTTPrequests until the previous one has been completed
- 25. Services UserService: fetch dataView: request and use data
- 26. perform actions orside-effects, such as logging. tap(fn) “Debug” and side effects with tap()
- 27.
- 28. A value thatchanges over time BehaviorSubject Store authentication token
- 29. UI: SignInComponent SignIn byusing LoginService
- 30. LoginService Invoke login RESTService and save token
- 31.
- 32. *ifLogged Structural Directive RenderDOM if user is logged Usage
- 33. AuthGuard Disable route accessif user is not logged Usage
- 34. HTTP Interceptors Inject tokento each XHR and handle errors
- 35.
- 36. NGRX Store ! Toomany subscriptions
- 37.
- 38.
- 39.
- 40. 7: telly.hoeger@billy.biz 8: sherwood@rosamond.me 9:chaim_mcdermott@dana.io 10: rey.padberg@karina.bizt FILTER ARRAY with map: easiest way Get user ID > 6 and email lowercase
- 41. X FILTER ARRAY WITHRXJS (1/3) Wrong Way
- 42. FILTER ARRAY WITHRXJS (2/3): flatten in single emissions Get user ID > 6 ! Too many. I just need one!
- 43. we only needto emit one value (3/3) Get user ID > 6 and email lowercase
- 44.
- 45. scan(fn) applies an accumulatorfunction over an observable sequence and returns each intermediate result
- 46. reduce(fn) apply a functionto each item emitted by an Observable, sequentially, and emit the final value
- 47. scan ! Too many. Ijust need one! Display the total of likes Given an array Display the total of likes
- 48. scan Display the totalof likes Given an array Display the total of likes Yo! :)
- 49.
- 50.
- 52. <ImageGallery> A simple carouselwith timer and NEXT / PREV buttons
- 53.
- 54. <ImageGallery> Enhanced version: getToken, 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.