This document discusses Angular Observables and how they can be used for handling data streams. It covers key topics such as: - What observables are and how they differ from promises by handling data streams rather than just asynchronous operations. - How to create simple observable data streams and subscribe to observables. - Common operators like map, filter, delay that allow manipulating observable streams. - Issues like memory leaks from subscriptions and how to prevent them through unsubscribing and using the async pipe. - Differences between cold and hot observables and subjects that allow multicasting to multiple subscribers.

1. Angular Observables
for Fun and Profit

2. Agenda
- What are observables?
- vs Promises
- Creating a simple observable data stream
- Subscribing to an observable
- Data leaks and unsubscription
- Basic operators
- Observable pipe
- Operator params: log, Boolean
- Hot vs cold
- Multiple subscriptions
- The async pipe

3. Gil Steiner
FE/FS developer
Game developer &
designer
il.linkedin.com/in/gil-steiner
gilsteiner.com
gamesgil@github

4. What are observables?
- Functional solution for handling data streams -
not another type of promise!
- The core part of the RxJS library
- Not specific to Angular

5. Observables vs Promises
- Promises are intended to solve a problem of “what to do when an
async operation completes?”
- Partially solve “callback hell”
- Observables handle data streams: how to relate to?
- Allow manipulating the stream (data, behavior)
- Allow switching and merging multiple streams
- Introduce a concise chain (pipe) of operators
- Extensible & modular

6. Observables vs Promises
- Promises are intended to solve a problem of “what to do when an
async operation completes?”
- Partially solve “callback hell”
- Observables handle data streams: how to relate to?
- Allow manipulating the stream (data, behavior)
- Allow switching and merging multiple streams
- Introduce a concise chain (pipe) of operators
- Extensible & modular

7. Observable structure
Observable - emitting
Observer - handling
Subscription - reading

8. Observable structure
obs$ = Observable.create(observer => {
observer.next(...);
observer.next(...);
observer.complete(); // observer.error(...)
}
sub = obs$.subscribe(value => …)
sub.unsubscribe();

9. A simpler method of creation
import {...} from ‘rxjs’;
of(value)
from(values)
fromEvent(target, event)
generate(...)
StackBlitz

10. Cold Observables
One shot - of(<value>)

11. Hot Observables
Perpetual / Multicast - interval

12. Multicasting - Multiple Subscriptions
Subscribing to a cold observable - late subscription
Hot observable - value changes

13. Subjects & BehaviorSubject
- Are both observers and observables
- BehaviorSubject allows caching the last value for late subscribers

14. Operators in the Pipe
Observable.pipe(
rxjsOp1,
rxjsOp2,
…
)

15. tap (was ‘do’)
Do something related or unrelated to the value
StackBlitz

16. map / mapTo
Returns an observable with a value based on the current value - not
to be confused with Array.prototype.map
MapTo returns an observable regardless of the current value
StackBlitz

17. filter
Allows data passing only if adheres to condition
StackBlitz

18. delay
Emit a value after a given amount of time
StackBlitz

19. Throwing & Catching
throwError operator
2nd parameter in subscription
StackBlitz

20. Preventing Memory Leaks
Direct unsubscribe
The async pipe
- take
- takeWhile
- takeUntil
- untilDestroyed

21. The async pipe
Allows handling observables directly in the template
Auto unsubscribes!
Allows adding Angular async pipes dynamically
StackBlitz