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.

Bf3acef686273e03fa4fdf125fdad3e9?s=128

Aliaksei Kuncevič

June 02, 2021
Tweet

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