Examples and use cases about Angular & RxJS

1. ANGULAR&RXJS
FABIOBIONDI.io
SEP2018

2. fabiobiondi.io
TRAINING AND MENTORING

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>

8. ANGULAR & RXJS

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

15. FILTER Router EVENTS

16. Reactive FORMSTemplate-driven FORMS

17. RxJS operators used in forms

18. Create Component at Runtime

19. HttpClient

20. HttpClient & map(fn)
Leanne Graham (Sincere@april.biz)
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

37. *ngIf…as
Only one
subscription

38. NGRX Effects

39. DATA MANIPULATION

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 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! :)

49. REAL-WORLD-EXAMPLES with
scan(fn)

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