Component Communication Techniques in Angular

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