Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Component Communication Techniques in Angular

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)

Aliaksei Kuncevič

June 02, 2021
Tweet

More Decks by Aliaksei Kuncevič

Other Decks in Programming

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