README.md

Module 7 - RxJS Deep Dive

Projects:

fully-reactive-app	Using RxJs with angular services
fun-with-operators	Introduction to RxJs Operators

RxJS in Angular Services

• We learned how to develop stateful services using BehaviorSubject and expose it as an observable using the .asObservable() method
• We understood that if we subscribe to an observable we must also unsubscribe from it when we are done with it to avoid memory leaks
• We saw that we can bind directly to an observable using the async pipe in the html
• We learned the term Fully Reactive Application as one where we pass observables all the way from the services to the html templates
• We saw how to configure manual change detection for components and understood that it can dramatically improve performance

Introduction to RxJS operators

• We talked about the concept of operators in math, strings and arrays
• We understood that RxJS operators create observables.
• We saw 4 documentation web sites that serve as reference guide for reactive operators
  • ReactiveX docs
  • RxJS docs
  • Rx Marbles
  • Rx Marble Visualizer
• We covered some simple operators
  • map
  • from
  • interval
  • filter
  • take
  • takeLast
  • mapTo
  • merge
• We created an example that uses observable to convert color search keyword into a list of matching results (colors)
• We Understood that the map operator cannot be used when we apply an asyncronous function on each event because it creates an Observable of Promises
• We saw how to use mergeAll and switchAll to flatten the higher order observables.
• We can also use shortcuts:
  • mergeMap(x => observable) is actually short for map(x => observable), mergeAll()
  • switchMap(x => observable) is actually short for map(x => observable), switchAll()
• We understood the difference between mergeMap and switchMap

Exercise

Convert the PopQuiz application to be fully reactive. You can use the video in the link for assistance.

• Presentation
• Helper Video