1.
Presented By:
Kiran & Neha
Subject & Behavior Subject
in Angular

2.
Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
Punctuality
Join the session 5 minutes prior to
the session start time. We start on
time and conclude on time!
Feedback
Make sure to submit a constructive
feedback for all sessions as it is
very helpful for the presenter.
Silent Mode
Keep your mobile devices in silent
mode, feel free to move out of
session in case you need to attend
an urgent call.
Avoid Disturbance
Avoid unwanted chit chat during
the session.

3.
Our Agenda
01 Introduction to Subject
02 What is Behavior Subject
03 Replay and Async Subject
04 When to use subject / Behavior Subject
05 Demo

4.
What is Subject?
● The Subjects are special observable which acts as both observer & observable.
● They allow us to emit new values to the observable stream using the next method.
● A Subject is a special type of Observable that allows values to be multicasted to many
Observers. The subjects are also observers because they can subscribe to another
observable and get value from it, which it will multicast to all of its subscribers.
● Subjects are like EventEmitters: they maintain a registry of many listeners.

5.
When to use Subject?
There are several scenarios where components need to talk to each other:
● Parent/Child — Where the child might be deep down in the DOM tree
● Dashboards — Where many siblings don’t even know each other but must communicate
● Components list — Components get rendered conditionally and might need to
communicate with each other without being aware of each other
When you are somewhere in the middle, services can be a good choice. Using Subjects in a
Service is a good pattern for
● sending data to multiple components,
● receiving data from multiple components,
● updating every component accordingly

6.
Hot & Cold Observable
● Observables are classified into two groups. Cold & Hot
● The cold observable does not activate the producer until there is a subscriber. This
is usually the case when the observable itself produces the data.
● The hot observable does not wait for a subscriber to emit the data. It can start
emitting the values right away. The happens when the producer is outside the
observable.
●

7.
Subject is Hot Observable

8.
Unicast and Multicast Observable
Unicast observable - an observable
whose emitted values are not shared
amongst subscribers.
Multicast observable - an observable
whose emitted values are shared
amongst subscribers.

9.
Subjects are Multicast
● Another important distinction between observable & subject is that subjects are
multicast.
● More than one subscriber can subscribe to a subject. They will share the same
instance of the observable. This means that all of them receive the same event when
the subject emits it.
● Multiple observers of an observable, on the other hand, will receive a separate instance
of the observable.

10.
What is Behavior Subject?
● One of the variants of Subjects is the BehaviorSubject, which has a notion of
"the current value".
● It stores the latest value emitted to its consumers, and whenever a new
Observer subscribes, it will immediately receive the "current value" from the
BehaviorSubject.
● Behavior Subjects are useful for representing "values over time". For instance,
an event stream of birthdays is a Subject, but the stream of a person's age
would be a BehaviorSubject.

11.
What is ReplaySubject ?
● ReplaySubject is a variant of a Subject which keeps a cache of previous values
emitted by a source observable and sends them to all new observers immediately
on subscription.
● This behavior of replaying a sequence of old values to new subscribes is where
the name for this type of a subject comes from.
● When an observer subscribes to a ReplaySubject, the subject begins by first
emitting all values from the cache and then continues to emit any other items
emitted by the source observable after the subscription.

12.
What is AsyncSubject ?
● AsyncSubject is a variant of a Subject which keeps the last value emitted by a
source observable before completion and sends it to all new subscriptions.
● AsyncSubject only emits the latest value only when it completes. If it errors out
then it will emit an error, but will not emit any values.
● This behavior means that you can always directly get the last emitted value from
the AsyncSubject even if the subscriber subscribes much later than the value was
stored.

13.
What is Void Subject ?
● In most of the scenarios where you use a Subject with subscribers, it's relevant
that you get access to the value that has passed.
● But what if you don't need an actual value but only want to hook into the event and
don't need a value. That's when you use a void subject.
● Sometimes the emitted value doesn't matter as much as the fact that a value was
emitted.
● By declaring a void subject, you signal that the value is irrelevant. Only the event
itself matters.

14.
When to Use Subject, Behavior,
Replay Or Async Subject
● Subjects are great for when you want to emit an event where the state of the event is
not important, i.e. it is not important for the subscribers of the event to know about
previous values emitted.
● Behavior Subjects are the opposite, they are useful if there is a current “state” of the
event that you want all subscribers to be able to access.
● Use a ReplaySubject when you need more than the last given value (For example, the
previous five values). Or you want to set a time window for the values can be validly
sent to subscribers.
● Use an AsyncSubject when you only want the last value to be passed to the
subscribers.

15.
DEMO

16.
References
● https://www.tektutorialshub.com/angular/subjects-in-angular/
● https://betterprogramming.pub/when-to-use-rxjs-subject-behavioursubject-repla
ysubject-asyncsubject-or-void-subject-in-angular-c2e9db61b4a0
● https://www.learnrxjs.io/learn-rxjs/operators/multicasting
● https://rxjs.dev/guide/subject
● https://betterprogramming.pub/when-to-use-rxjs-subject-behavioursubject-repla
ysubject-asyncsubject-or-void-subject-in-angular-c2e9db61b4a0

17.
Thank You !
Get in touch with us:
Lorem Studio, Lord Building
D4456, LA, USA