Save 37% off PRO during our Black Friday Sale! »

Reactive Services in Angular

Reactive Services in Angular

This is a lightning talk about how handle component communication in Angular apps using reactive services approach. As a part of this talk I am introducing rx-service library that simplifying the implementation of reactive services and helps to make them simpler and more consistent.


Rx Service

This talk is a small part of my Progressive State Management talk that you can watch here:



Aliaksei Kuncevič

September 10, 2020


  1. Reactive Services in Angular by ALIAKSEI KUNCEVIČ v 1.0

  2. ALIAKSEI KUNCEVIČ Independent Consultant

  3. @kuncevic Angular Minsk (BY) Frontend Tech (AU) COMMUNITY Angular

    Workshop Angular Sydney (AU) TEACHING‍
  4. @kuncevic CREATOR Aurelia vs React vs Vue vs Svelte

    vs Ember vs Elm vs Angular
  5. @kuncevic NGXS Core Team

  6. @kuncevic @markwhitfeld @overthesanity @splincodewd @c4rniatto @amcdnl @apolo_codes @joaqcid NGXS

    Team Map
  7. TOC ✅ Single Page Apps (SPA) ✅ Reactive Services

    and RxJS ✅ rx-service library
  8. Angular vs AngularJS 2+ 1.x

  9. npm show @angular/core version

  10. RxJS

  11. What is the most common challenge in SPA's ?

  12. Component communication

  13. Component communication

  14. Parent Nested components Child 1 Child 2 Child N

  15. Parent Child 1 Component communication Child 2 Child N

  16. Parent Child 1 Component communication Child 2 Child N

  17. Basic example

  18. Basic solution ✅ Parent to Child @Input() ✅ Child

    to Parent @Output()
  19. Nested components @Input() and @Output()

  20. Reactive Services

  21. Reactive Services

  22. What is Service ?

  23. What is Reactive Service ?

  24. RxJS BehaviorSubject ✅ Set initial value ✅ Set new

    value ✅ Get current value
  25. Demo

  26. Can we do better than that ?


  28. rx-service


  30. Demo

  31. Component Communication Reactive Services and RxJS Reactive Services in

    Angular rx-service library

  33. Th nk you!



  36. Links Demo code and full talk video ement-with-ngxs rx-service library