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.

Demo: https://github.com/kuncevic/progressive-state-management-with-ngxs

Rx Service
https://github.com/kuncevic/rx-service

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

Video: https://youtu.be/mY9rlno7_uc

Transcript

1. kuncevic.dev Reactive Services in Angular by ALIAKSEI KUNCEVIČ v 1.0 (10/09/2020)
2. kuncevic.dev ALIAKSEI KUNCEVIČ Independent Consultant https://dev.to/kuncevic https://twitter.com/kuncevic https://linkedin.com/in/kuncevic
3. kuncevic.dev @kuncevic Angular Minsk (BY) Frontend Tech (AU) COMMUNITY Angular Workshop Angular Sydney (AU) TEACHING‍ kuncevic.dev
4. kuncevic.dev @kuncevic CREATOR Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular frontendwatch.com
5. kuncevic.dev @kuncevic NGXS Core Team
6. kuncevic.dev @kuncevic @markwhitfeld @overthesanity @splincodewd @c4rniatto @amcdnl @apolo_codes @joaqcid NGXS Team Map
7. kuncevic.dev TOC ✅ Single Page Apps (SPA) ✅ Reactive Services and RxJS ✅ rx-service library
8. kuncevic.dev Angular vs AngularJS 2+ 1.x
9. kuncevic.dev npm show @angular/core version
10. kuncevic.dev RxJS
11. kuncevic.dev What is the most common challenge in SPA's ?
12. kuncevic.dev Component communication
13. kuncevic.dev Component communication
14. kuncevic.dev Parent Nested components Child 1 Child 2 Child N
15. kuncevic.dev Parent Child 1 Component communication Child 2 Child N
16. kuncevic.dev Parent Child 1 Component communication Child 2 Child N Sibling
17. kuncevic.dev Basic example
18. kuncevic.dev Basic solution ✅ Parent to Child @Input() ✅ Child to Parent @Output()
19. kuncevic.dev Nested components @Input() and @Output()
20. kuncevic.dev Reactive Services
21. kuncevic.dev Reactive Services
22. kuncevic.dev What is Service ?
23. kuncevic.dev What is Reactive Service ?
24. kuncevic.dev RxJS BehaviorSubject ✅ Set initial value ✅ Set new value ✅ Get current value
25. kuncevic.dev Demo
26. kuncevic.dev Can we do better than that ?
27. kuncevic.dev
28. kuncevic.dev rx-service
29. kuncevic.dev github.com/kuncevic/rx-service
30. kuncevic.dev Demo
31. kuncevic.dev Component Communication Reactive Services and RxJS Reactive Services in Angular rx-service library
32. kuncevic.dev
33. kuncevic.dev twitter.com/kuncevic linkedin.com/in/kuncevic Th nk you! dev.to/kuncevic
34. kuncevic.dev kuncevic.dev/daily
35. kuncevic.dev meetup.com/Angular-Sydney
36. kuncevic.dev Links Demo code and full talk video github.com/kuncevic/progressive-state-manag ement-with-ngxs youtu.be/mY9rlno7_uc rx-service library github.com/kuncevic/rx-service