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

Component Communication Techniques in Angular

Bf3acef686273e03fa4fdf125fdad3e9?s=47 Aliaksei Kuncevič
June 02, 2021
Programming
0
64

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

More Decks by Aliaksei Kuncevič

See All by Aliaksei Kuncevič
Bf3acef686273e03fa4fdf125fdad3e9?s=48 kuncevic
0
39
Bf3acef686273e03fa4fdf125fdad3e9?s=48 kuncevic
0
72
Bf3acef686273e03fa4fdf125fdad3e9?s=48 kuncevic
0
54
Bf3acef686273e03fa4fdf125fdad3e9?s=48 kuncevic
0
1.4k
Bf3acef686273e03fa4fdf125fdad3e9?s=48 kuncevic
0
59
Bf3acef686273e03fa4fdf125fdad3e9?s=48 kuncevic
0
130
Bf3acef686273e03fa4fdf125fdad3e9?s=48 kuncevic
0
120
Bf3acef686273e03fa4fdf125fdad3e9?s=48 kuncevic
0
46
Bf3acef686273e03fa4fdf125fdad3e9?s=48 kuncevic
0
110

Other Decks in Programming

See All in Programming
72328eacb3f08064170cfec86b728d2a?s=48 onohiroshi1
5
20k
Dee1ceb83e8c6afd83792ca7df9e9524?s=48 teshi04
3
1.4k
9fe8f69ed3f442b205816ce9af169529?s=48 dicaormu
0
210
Ad4c3c738e57a9bbcb800871e81c232d?s=48 itosho
0
170
6aaaf03c4f5c681d89c3078bd6070a6f?s=48 rumi_yamaguchi
0
1.4k
3c9c5f9a91cac73073db8bb2903bd968?s=48 mamy1326
12
2.9k
A73ed5cefbbd84abd2c5e14a5eb4a339?s=48 ippey
8
700
A1391fea7feb81a26c333c05f831dbf3?s=48 tosh2230
11
3k
80a3a3857a55f154d23acb705eff72cc?s=48 star_zero
2
3.7k
Fc59401781a26b10f5d4fc5b758fb3b7?s=48 andrewradev
0
100
E7526ec3e801f8ba99f6746498a154a6?s=48 rakyll
1
1.3k
23e7f90fa36af44f13000c1229240984?s=48 uri
2
200

Featured

See All Featured
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
496
110k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
331
36k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
298
39k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
288
47k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
129
22k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
45
2.5k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
6
750
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
224
15k

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