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
   

   View Slide

2. kuncevic.dev
   ALIAKSEI KUNCEVIČ
   GDE | Mentor | Consultant
   https://dev.to/kuncevic
   https://twitter.com/kuncevic
   https://linkedin.com/in/kuncevic
   

   View Slide

3. kuncevic.dev
   @kuncevic
   COMMUNITY TEACHING
   🚀
   PODCAST
   󰞵
   

   View Slide

4. kuncevic.dev
   @kuncevic CREATOR
   💡
   Aurelia vs React vs Vue vs Svelte vs Ember vs Elm vs Angular
   frontendwatch.com
   

   View Slide

5. kuncevic.dev
   TOC
   ✅ Single Page Apps (SPA)
   ✅ Component Communication
   ✅ Reactive Services
   ✅ Demo
   

   View Slide

6. kuncevic.dev
   What is the most common
   challenge in SPA's ? 🤔
   

   View Slide

7. kuncevic.dev
   Component communication 📢
   

   View Slide

8. kuncevic.dev
   Component communication
   

   View Slide

9. kuncevic.dev
   Basic example
   

   View Slide

10. kuncevic.dev
    @Input() and @Output()
    

    View Slide

11. kuncevic.dev
    @Input() and @Output()
    

    View Slide

12. kuncevic.dev
    @Input() and @Output()
    

    View Slide

13. kuncevic.dev
    Parent
    Nested components
    Child 1
    Child 2
    Child N
    

    View Slide

14. kuncevic.dev
    Parent
    Child 1
    Component communication
    Child 2
    Child N
    

    View Slide

15. kuncevic.dev
    Parent
    Child 1
    Component communication
    Child 2
    Child N
    Sibling
    

    View Slide

16. kuncevic.dev
    Nested components 😿
    

    View Slide

17. kuncevic.dev
    DEMO
    

    View Slide

18. kuncevic.dev
    Nested components 🤯
    

    View Slide

19. kuncevic.dev
    ❌ A lot of boilerplate
    ❌ Tight coupling
    Nested components
    

    View Slide

20. kuncevic.dev
    Is there a better way?
    

    View Slide

21. kuncevic.dev
    Reactive Services 🔥
    

    View Slide

22. kuncevic.dev
    Reactive Services 🔥
    

    View Slide

23. kuncevic.dev
    RxJS
    

    View Slide

24. kuncevic.dev
    RxJS 🚀
    ✅ Create an observable
    ✅ Set initial value
    ✅ Set new value
    ✅ Get current value
    

    View Slide

25. kuncevic.dev
    rx-service
    

    View Slide

26. kuncevic.dev
    rx-service
    ✅ setValue()
    ✅ getValue()
    ✅ resetValue()
    

    View Slide

27. kuncevic.dev
    dev.to/kuncevic
    

    View Slide

28. kuncevic.dev
    DEMO
    

    View Slide

29. kuncevic.dev
    Component Communication
    Reactive Services
    You just learned
    rx-service library
    

    View Slide

30. kuncevic.dev
    State management solutions
    

    View Slide

31. kuncevic.dev
    🎙 angularrocks.com
    📧 kuncevic.dev
    

    View Slide