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
  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