Component Communication Techniques in Angular

The component communication is a very important aspect of any modern web application. The way we organizing a component communication in Angular applications defines the application data flow and affects the architecture of the application. In this talk I will talk how angular developers solving this problems using different techniques.

Transcript

1. kuncevic.dev Component Communication Techniques by ALIAKSEI KUNCEVIČ v 1.0 (06/01/2021) in Angular
2. kuncevic.dev ALIAKSEI KUNCEVIČ GDE | Mentor | Consultant https://dev.to/kuncevic https://twitter.com/kuncevic https://linkedin.com/in/kuncevic
3. kuncevic.dev @kuncevic COMMUNITY 📢 TEACHING 󰞹 🚀 PODCAST 🎙 OSS 🤓 󰞵
4. kuncevic.dev @kuncevic CREATOR 💡 Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular frontendwatch.com
5. kuncevic.dev TOC ✅ Single Page Apps (SPA) ✅ Basic Component Communication ✅ RxJS and Reactive Services
6. kuncevic.dev What is the most common challenge in SPA's ? 🤔
7. kuncevic.dev Component communication 📢
8. kuncevic.dev Component communication
9. kuncevic.dev Basic example
10. kuncevic.dev @Input() and @Output()
11. kuncevic.dev @Input() and @Output()
12. kuncevic.dev Parent Nested components Child 1 Child 2 Child N
13. kuncevic.dev Parent Child 1 Component communication Child 2 Child N
14. kuncevic.dev Parent Child 1 Component communication Child 2 Child N Sibling
15. kuncevic.dev Nested components 🤔
16. kuncevic.dev Nested components 😿
17. kuncevic.dev 👎 A lot of boilerplate 👎 Tight coupling Nested components
18. kuncevic.dev Is there a better way?
19. kuncevic.dev Reactive Services 🔥
20. kuncevic.dev Reactive Services 🔥
21. kuncevic.dev RxJS *Subject 🚀
22. kuncevic.dev RxJS BehaviorSubject 🚀 ✅ Create an observable ✅ Set initial value ✅ Set new value ✅ Get current value
23. kuncevic.dev DEMO
24. kuncevic.dev Can we do better than that ?
25. kuncevic.dev
26. kuncevic.dev rx-service
27. kuncevic.dev github.com/kuncevic/rx-service
28. kuncevic.dev DEMO
29. kuncevic.dev Component Communication Reactive Services Reactive Services in Angular rx-service library
30. kuncevic.dev
31. kuncevic.dev 👀 frontendwatch.com 🎙 angularrocks.com 📧 kuncevic.dev