Tweet
Tweet

Slide 1

Slide 1 text

kuncevic.dev Component Communication Techniques by ALIAKSEI KUNCEVIČ v 1.0 (06/01/2021) v 1.1 (23/06/2022) in Angular

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

kuncevic.dev @kuncevic COMMUNITY TEACHING 🚀 PODCAST 󰞵

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

kuncevic.dev Component communication 📢

Slide 8

Slide 8 text

kuncevic.dev Component communication

Slide 9

Slide 9 text

kuncevic.dev Basic example

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

kuncevic.dev Nested components 😿

Slide 17

Slide 17 text

kuncevic.dev DEMO

Slide 18

Slide 18 text

kuncevic.dev Nested components 🤯

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

kuncevic.dev Is there a better way?

Slide 21

Slide 21 text

kuncevic.dev Reactive Services 🔥

Slide 22

Slide 22 text

kuncevic.dev Reactive Services 🔥

Slide 23

Slide 23 text

kuncevic.dev RxJS

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

kuncevic.dev rx-service

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

kuncevic.dev dev.to/kuncevic

Slide 28

Slide 28 text

kuncevic.dev DEMO

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

kuncevic.dev State management solutions

Slide 31

Slide 31 text

kuncevic.dev 🎙 angularrocks.com 📧 kuncevic.dev