Observables Notes

• Observable variables usually have the suffix $ in the name.

• Any observable without subscription, it is useless. The observable runs and
give you data, when you subscribe to it.
• The subscribe will get the final value from the observable and you can use
that value in the subscribe, or you can just subscribe to run the observable
and all the code can be in the observable brackets.
• The subscribe method returns an observable.
• You always get from the service (http client) an observable.
• A Observer (subscriber) is something which uses the Observable data. In
order to use the data of Observable the Observer must subscribe to the
Observable.
 Observables Promises

handle asynchronous data and perform handle asynchronous data and perform
asynchronous operations asynchronous operations

streams the data in packets provides all data at once

return the data only when some one return the data even if there is no one
subscribes to it to use it

provided by a 3rd party lib Rxjs native to JS

new Observable()
• Import: import {Observable} from ‘rxjs’
• Use: to create new observable.
• To emit a value: .next(value)
• Example:
Error method
• Import: import {Observable} from ‘rxjs’
• Use: to emit an error.
• To emit an error: .error(new Error(‘message’))
• Example:

- Old format: - New format:

Complete method
• Import: import {Observable} from ‘rxjs’
• Use: to emit a completion of the observable.
• To complete: .complete()
• Example:
Create method
• Import: import {Observable} from ‘rxjs’
• Use: another way to create an observable
instead of directly using the observable
constructor. This way is old format and not
wanted anymore.
• To emit a value: .next(value)
• Example:
Operators Notes
• Operators: functions that takes an observable as input and transform it into
a new observable and return it. We use operators to manipulate the
observable data stream.
• We use Pipe() method to pass operators methods to the observable that
comes from rxjs/operators.
• We can pass more than one operator to the pipe method, and each value in
the data stream one after one will flow in all methods.
• The order of the operators is important.
• Each operator does return new observable and does not change the
original observable, unless you assign the results of the pipe to the original
observable.
of operator
• Import: import {of} from ‘rxjs’
• Use: to emit multiple values at the same time.
• Example:
From operator
• Import: import {from} from ‘rxjs’
• Use: to emit Iterable values one
after one.
• Example:
Interval
• Import {interval} from ‘rxjs’
• Use: to create an observable that
emits sequential numbers every
specified interval of time.
• Example:
timer
• Import {timer} from ‘rxjs’
• Use: to create an observable that
emits sequential numbers every
specified interval of time, with a
delay time in the beginning.
• Example:
range operator
• Import: import {range} from ‘rxjs’
• Use: to create observable that emits a
sequence of numbers within a specified
range.
• Example:
distinct operator
• Import: import {distinct} from ‘rxjs’
• Use: to remove duplicate values.
• Example:
first operator
• Import: import {first} from ‘rxjs’
• Use: to emit only the first data.
• Example:
last operator
• Import: import {last} from ‘rxjs’
• Use: to emit only the last data.
• Example:
Skip operator
• Import: import {skip} from ‘rxjs’
• Use: to skip positions from being emitted.
• Example:
take operator
• Import: import {take} from ‘rxjs’
• Use: to emit values to specific index.
• Example:
toArray operator
• Import: import {toArray}
from ‘rxjs’
• Use: to emit values in array
format.
• Example:
filter operator
• Import: import {filter} from ‘rxjs/operators’
• Use: to check the observable data stream and return a
Boolean value, based on the condition, if the Boolean
value returned is true, then the data stream will pass.
• Example:
map operator
• Import: import {map} from ‘rxjs/operators’
• Use: to manipulate the observable data stream
• Example:
concatAll operator
• Import: import {concatAll} from
‘rxjs/operators’
• Use: if u have observable inside
another observable, then instead of
having nested subscribe, you can user
concatAll to convert the observables to
its values.
• Example:
concatMap operator
• Import: import {concatMap} from
‘rxjs/operators’
• Use: combine the map and concatMap.
• Example:
mergeAll operator
• Import: import {mergeAll} from ‘rxjs’
• Use: if u have observable inside
another observable, then instead of
having nested subscribe, you can use
mergeAll to convert the observable to
its value.
• Example:
 mergeMap (flatMap) operator
• Import: import {mergeMap}
from ‘rxjs’
• Use: to convert the
observable to its value and
then return the value (the
combination of map and
mergeAll).
• Example:
Difference between contactMap and
mergeMap
concatMap : behaves like a queue: It stores all calls and sends one after
another. If one is completed, the next one is being processed.
mergeMap : Also sends all requests, like concatMap but does not wait
until the response is coming back. It sends them out as they come.
concat operator
• Import: import {concat} from
‘rxjs/operators’
• Use: to joins multiple
observables together, by
subscribing to them one at a
time and merging their results
into the output observable.
• Example:
merge operator
• Import: import {merge} from
‘rxjs/operators’
• Use: to merge more than one
observable together and to
concurrently emits all values
from every given input
observable.
• Example:
zip operator
• Import: import {zip} from
‘rxjs/operators’
• Use: it brings together two or
more sequence of
corresponding values as a
tuple.
• Example:
defaultIfEmpty operator
• Import: import
{defaultIfEmpty} from
‘rxjs/operators’
• Use: if the observable is
empty, it will give you a
default value.
• Example:
find operator
• Import: import {find} from
‘rxjs/operators’
• Use: emits only the first value
emitted by the source
observable that meets some
condition.
• Example:
findIndex operator
• Import: import {findIndex}
from ‘rxjs/operators’
• Use: emits only the first value
index emitted by the source
observable that meets some
condition.
• Example:
count operator
• Import: import {count} from
‘rxjs/operators’
• Use: returns the number of
elements in the observable.
• Example:
max operator
• Import: import {max} from
‘rxjs/operators’
• Use: return the max value
from the observable.
• Example:
min operator
• Import: import {min} from
‘rxjs/operators’
• Use: returns the min value
from the observable.
• Example:
shareReplay operator
• Import: import {shareReplay}
from ‘rxjs/operators’
• Use: when you want get the
stream of data from a service
observable more than once,
instead of each time calling a
service, you only call it once
and get the data once and use
the data later anytime.
• Example:
Subjects Notes
• Subject: a special type of observable, it can multicast to many
observable. How ever normal observable is unicast.
• Subject are like EventEmitters, they maintain many listeners.
• Subject can emit value anytime using next() method, while observable
only can subscribe to it after creating it.
• Subjects will only listen to the values emitted after subscribing.
Subject
• Import: import {Subject} from 'rxjs';
• Use: to emit the values anytime.
• Example:
Behavior Subject
• Import: import {BehaviorSubject} from 'rxjs’;
• In Behavior Subject you can have a default value.
• Use: to emit the values anytime.
• Example:
Replay Subject
• Import: import {ReplaySubject} from 'rxjs’;
• In Replay Subject you can specify the
number of emits.
• Use: to emit the values anytime or specific
number of values.
• Example:
Async Subject
• Import: import {AsyncSubject} from 'rxjs’;
• In Async Subject it will return the final
value once complete.
• Use: to emit the final value.
• Example: