Interaction between Angular Components

5 ways for components to Interact between them.

Our Angular App

Sibling A

Sibling B

Parent

Reactive Programming 

Entire programs can be built uniquely around the notion of streams.

Reactive Programming :

Smart Components VS Dumb Components

Smart Components

Container Components

Dumb Components

Presentational Components

Sibling A

Sibling B

Parent

Service

@Output() & @Input()

@Output()

@Input()

Using @Output() & @Input()

@ViewChild()

Using @ViewChild()

RxJS Subjects

Using Subject

RxJS BehaviorSubject

Using BehaviorSubject

RxJS
BehaviorSubjects
VS Subjects

Subject

BehaviorSubject

Must ALWAYS return a value on subscription even if it hasn't received a next(). Must have an initial value.

Gets triggered for values received after the subscription is called. No Initial value needed.

The Pro way

(Combining what we have learned)

Wait, not everything is pretty

The solution?

NGRX

DON'T DO

Thanks 

Github:

@angularjax