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.

Presented on
Angular Global Summit - 02 Jun, 2021 (v1.0)
GDG I/O Extended - 23 Jun 2022 (v.1.1)

Transcript

1. kuncevic.dev Component Communication Techniques by ALIAKSEI KUNCEVIČ v 1.0 (06/01/2021) v 1.1 (23/06/2022) 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 󰞵
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) ✅ Component Communication ✅ Reactive Services ✅ Demo
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 @Input() and @Output()
13. kuncevic.dev Parent Nested components Child 1 Child 2 Child N
14. kuncevic.dev Parent Child 1 Component communication Child 2 Child N
15. kuncevic.dev Parent Child 1 Component communication Child 2 Child N Sibling
16. kuncevic.dev Nested components 😿
17. kuncevic.dev DEMO
18. kuncevic.dev Nested components 🤯
19. kuncevic.dev ❌ A lot of boilerplate ❌ Tight coupling Nested components
20. kuncevic.dev Is there a better way?
21. kuncevic.dev Reactive Services 🔥
22. kuncevic.dev Reactive Services 🔥
23. kuncevic.dev RxJS
24. kuncevic.dev RxJS 🚀 ✅ Create an observable ✅ Set initial value ✅ Set new value ✅ Get current value
25. kuncevic.dev rx-service
26. kuncevic.dev rx-service ✅ setValue() ✅ getValue() ✅ resetValue()
27. kuncevic.dev dev.to/kuncevic
28. kuncevic.dev DEMO
29. kuncevic.dev Component Communication Reactive Services You just learned rx-service library
30. kuncevic.dev State management solutions
31. kuncevic.dev 🎙 angularrocks.com 📧 kuncevic.dev