Learn 7 essential tips when using RxJS with Angular and Firebase, each with its own example. Full lesson: https://angularfirebase.com/lessons/top-7-rxjs-patterns-for-angular-development/

JavaScript Evangelist BehaviorSubject: https://youtu.be/IpM3oUPuGME

Learn about RxJS at https://learnrxjs.io
2024-02-04T08:20:34.893Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
782eb6b1-4d03-428a-bd86-278880edae8f
6f1d85127bd0ec2c6b43eda3f71ffdbe380d9c120ab58b0b5126d7036a9e4140
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
RxJS is a huge library with a very steep learning curve.
In this episode, I'm going to talk about a few key concepts that are specific to Angular Firebase developers.
I believe it's best to focus on what you actually need to learn rather than try to master the entire RxJS library.
To do this, I've created a simple component that uses the AngularFire 2 package to retrieve cats and dogs from Firebase.
Cats and dogs each have their own collection, and there's another collection for humans, which represent the owner of a given pet.
Your component should look something like this.
We import the AngularFire database and then inject it in the constructor.
When using RxJS and Angular, You only import the methods and classes that you need.
In RxJS, there are 2 types of methods, static and instance.
In this first example, we use an instance method, combineLatest.
So we create 2 instances of an observable, then we can use that operator on the observable instance itself.
Notice how the method was imported from add slash operator.
The operator directory contains all of the instance methods.
It's not important to know at this point, but using combineLatest will result in an observable array of 2 strings.
Now let's accomplish the same thing using a static method.
To obtain the static method, we import from the add slash observable directory.
Instead of calling the method on an instance, we call it on the observable class itself, and then we pass the 2 observables to it as arguments.
In RxJS, some methods are only instance, others are only static, and some overlap for both.
Now let's talk about subscriptions.
That's how you actually extract data from observables.
There are 2 main ways to do this in Angular.
You can either subscribe in the component TypeScript or in the component HTML.
In this example, we will subscribe to cats in the HTML and dogs in the component typescript.
Notice how cats are a Firebase list observable and dogs are the regular array.
Calling db list will return an observable from the Firebase database.
For cats, we just keep it as is, but for dogs, we call Subscribe, which will cause the observable to emit an array of dogs that we can set as the variable on this component.
To subscribe to cats, we do this in the template itself by using the async pipe provided by Angular.
Under the hood, this is subscribing to the observable just like we did in the TypeScript for dogs.
It's generally preferred to use the async pipe when possible because it will also unsubscribe to the observable to prevent memory leaks, and it just results in less code.
When we iterate over dogs, notice we're not using the async pipe since that was already unwrapped in the component.
If we go into the app, we can see the results are identical for both collections.
When you create subscriptions, it's, uh, good practice to unsubscribe when that data is no longer needed.
If you use the async pipe like we did with cats, this will happen automatically.
But with dogs, we built the subscription manually, so we want to end that description when the component's no longer in use.
We can do this by setting the subscription to its own variable, then listen for the onDestroy lifecycle hook, and call unsubscribe.
The next concept I wanna talk about is mapping observables.
This allows you to transform data before you subscribe to it.
The first thing we'll do is transform a list observable of cats into a number based on the length of that collection.
So first, we obtain the list observable from Firebase, Then we call map, and that will emit an array, which we can just call length on, and that'll return a number representing the length of that collection.
In the next example, we take a dog as an object observable, then map its name just to a single string.
As you can see, the map operator is very powerful.
You can use it to transform any type of asynchronous data into the format that you want.
Going back to the HTML, we can just call these observables with the async pipe and get their mapped values back.
Going back into the app, we can see the observable is transformed into a string and a number as expected.
Now let's talk about the switch map operator.
This allows us to handle data relationships that exist between 2 independent streams.
A common example in Firebase is when you need the auth observable to emit the current user before he can query some other data.
We're going to simulate that situation here by taking an object observable of a human, Then use the name from that observable to query the pets owned by that human.
So switch map is kind of like subscribing to the first observable and then using that data to return a second observable.
So we set this whole thing equal to the dogs variable, then iterate over it in the template like normal with the async pipe.
Back in the app, we can see the dogs observable only emits the 2 dogs that match this human owner name.
In some cases, you might find yourself needing to combine 2 observables into 1.
RxJS has several different combination operators, but we'll just be focusing on combine latest for this example.
We will pull 2 different object observables from Firebase and then combine them into a new observable called animals.
In this case, I use the static method from the observable class to pass both of these object observables as arguments.
This results in a observable with an array that we can iterate over in the template.
If we go back to the app, we can see we have 1 cat and 1 dog in an array even though they come from completely different collections in Firebase.
The final topic I wanna cover is about behavior subjects, which allow us to share current data throughout an Angular app.
I'll be going over this very quickly, so I also recommend checking out the JavaScript evangelist and his video on behavior subjects.
Check out the link in the description.
A behavior subject is just an observable that we can push data to.
It also has a concept of a current value, which is very useful for real time app development because you generally want the most up to date information displayed in the app.
In this example, we're gonna create a new variable called Current dog, which is a behavior subject, and it gets updated whenever you click on the dog's image.
This may seem trivial in this example, but when you use a behavior subject In an Angular service, you can then share current data throughout the application.
We push new data to the behavior subject by calling next, and that will update any observers throughout the app.
In the template, we allow the user to change the current dog or the value of the behavior subject by clicking on a dog's image.
Then we unwrap the behavior subject with the async pipe just like we would with any other observable.
But also notice how we use that question mark before calling any attributes because the default value is null, so we don't wanna call an attribute that doesn't exist.
Now if we go back into the app, we can see when we click on a dog's image, it updates the The current dog with that data.
That's it for my top 7 RxJS patterns for Angular Firebase developers.
If this video helped you, please like and subscribe.
And if you wanna support the channel, Consider becoming a pro member at angularfirebase.com.
Thanks for watching and I'll see you next time.

Speaker 0: RxJS is a huge library with a very steep learning curve. In this episode, I'm going to talk about a few key concepts that are specific to Angular Firebase developers. I believe it's best to focus on what you actually need to learn rather than try to master the entire RxJS library. To do this, I've created a simple component that uses the AngularFire 2 package to retrieve cats and dogs from Firebase. Cats and dogs each have their own collection, and there's another collection for humans, which represent the owner of a given pet.

Your component should look something like this. We import the AngularFire database and then inject it in the constructor. When using RxJS and Angular, You only import the methods and classes that you need. In RxJS, there are 2 types of methods, static and instance. In this first example, we use an instance method, combineLatest.

So we create 2 instances of an observable, then we can use that operator on the observable instance itself. Notice how the method was imported from add slash operator. The operator directory contains all of the instance methods. It's not important to know at this point, but using combineLatest will result in an observable array of 2 strings. Now let's accomplish the same thing using a static method.

To obtain the static method, we import from the add slash observable directory. Instead of calling the method on an instance, we call it on the observable class itself, and then we pass the 2 observables to it as arguments. In RxJS, some methods are only instance, others are only static, and some overlap for both. Now let's talk about subscriptions. That's how you actually extract data from observables.

There are 2 main ways to do this in Angular. You can either subscribe in the component TypeScript or in the component HTML. In this example, we will subscribe to cats in the HTML and dogs in the component typescript. Notice how cats are a Firebase list observable and dogs are the regular array. Calling db list will return an observable from the Firebase database.

For cats, we just keep it as is, but for dogs, we call Subscribe, which will cause the observable to emit an array of dogs that we can set as the variable on this component. To subscribe to cats, we do this in the template itself by using the async pipe provided by Angular. Under the hood, this is subscribing to the observable just like we did in the TypeScript for dogs. It's generally preferred to use the async pipe when possible because it will also unsubscribe to the observable to prevent memory leaks, and it just results in less code. When we iterate over dogs, notice we're not using the async pipe since that was already unwrapped in the component.

If we go into the app, we can see the results are identical for both collections. When you create subscriptions, it's, uh, good practice to unsubscribe when that data is no longer needed. If you use the async pipe like we did with cats, this will happen automatically. But with dogs, we built the subscription manually, so we want to end that description when the component's no longer in use. We can do this by setting the subscription to its own variable, then listen for the onDestroy lifecycle hook, and call unsubscribe.

The next concept I wanna talk about is mapping observables. This allows you to transform data before you subscribe to it. The first thing we'll do is transform a list observable of cats into a number based on the length of that collection. So first, we obtain the list observable from Firebase, Then we call map, and that will emit an array, which we can just call length on, and that'll return a number representing the length of that collection. In the next example, we take a dog as an object observable, then map its name just to a single string.

As you can see, the map operator is very powerful. You can use it to transform any type of asynchronous data into the format that you want. Going back to the HTML, we can just call these observables with the async pipe and get their mapped values back. Going back into the app, we can see the observable is transformed into a string and a number as expected. Now let's talk about the switch map operator.

This allows us to handle data relationships that exist between 2 independent streams. A common example in Firebase is when you need the auth observable to emit the current user before he can query some other data. We're going to simulate that situation here by taking an object observable of a human, Then use the name from that observable to query the pets owned by that human. So switch map is kind of like subscribing to the first observable and then using that data to return a second observable. So we set this whole thing equal to the dogs variable, then iterate over it in the template like normal with the async pipe.

Back in the app, we can see the dogs observable only emits the 2 dogs that match this human owner name. In some cases, you might find yourself needing to combine 2 observables into 1. RxJS has several different combination operators, but we'll just be focusing on combine latest for this example. We will pull 2 different object observables from Firebase and then combine them into a new observable called animals. In this case, I use the static method from the observable class to pass both of these object observables as arguments.

This results in a observable with an array that we can iterate over in the template. If we go back to the app, we can see we have 1 cat and 1 dog in an array even though they come from completely different collections in Firebase. The final topic I wanna cover is about behavior subjects, which allow us to share current data throughout an Angular app. I'll be going over this very quickly, so I also recommend checking out the JavaScript evangelist and his video on behavior subjects. Check out the link in the description.

A behavior subject is just an observable that we can push data to. It also has a concept of a current value, which is very useful for real time app development because you generally want the most up to date information displayed in the app. In this example, we're gonna create a new variable called Current dog, which is a behavior subject, and it gets updated whenever you click on the dog's image. This may seem trivial in this example, but when you use a behavior subject In an Angular service, you can then share current data throughout the application. We push new data to the behavior subject by calling next, and that will update any observers throughout the app.

In the template, we allow the user to change the current dog or the value of the behavior subject by clicking on a dog's image. Then we unwrap the behavior subject with the async pipe just like we would with any other observable. But also notice how we use that question mark before calling any attributes because the default value is null, so we don't wanna call an attribute that doesn't exist. Now if we go back into the app, we can see when we click on a dog's image, it updates the The current dog with that data. That's it for my top 7 RxJS patterns for Angular Firebase developers.

If this video helped you, please like and subscribe. And if you wanna support the channel, Consider becoming a pro member at angularfirebase.com. Thanks for watching and I'll see you next time.
RxJS is a huge library with a very steep learning curve. In this episode, I'm going to talk about a few key concepts that are specific to Angular Firebase developers. I believe it's best to focus on what you actually need to learn rather than try to master the entire RxJS library. To do this, I've created a simple component that uses the AngularFire 2 package to retrieve cats and dogs from Firebase. Cats and dogs each have their own collection, and there's another collection for humans, which represent the owner of a given pet. Your component should look something like this. We import the AngularFire database and then inject it in the constructor. When using RxJS and Angular, You only import the methods and classes that you need. In RxJS, there are 2 types of methods, static and instance. In this first example, we use an instance method, combineLatest. So we create 2 instances of an observable, then we can use that operator on the observable instance itself. Notice how the method was imported from add slash operator. The operator directory contains all of the instance methods. It's not important to know at this point, but using combineLatest will result in an observable array of 2 strings. Now let's accomplish the same thing using a static method. To obtain the static method, we import from the add slash observable directory. Instead of calling the method on an instance, we call it on the observable class itself, and then we pass the 2 observables to it as arguments. In RxJS, some methods are only instance, others are only static, and some overlap for both. Now let's talk about subscriptions. That's how you actually extract data from observables. There are 2 main ways to do this in Angular. You can either subscribe in the component TypeScript or in the component HTML. In this example, we will subscribe to cats in the HTML and dogs in the component typescript.
Notice how cats are a Firebase list observable and dogs are the regular array. Calling db list will return an observable from the Firebase database. For cats, we just keep it as is, but for dogs, we call Subscribe, which will cause the observable to emit an array of dogs that we can set as the variable on this component. To subscribe to cats, we do this in the template itself by using the async pipe provided by Angular.
cats
dogs
animals
Under the hood, this is subscribing to the observable just like we did in the TypeScript for dogs. It's generally preferred to use the async pipe when possible because it will also unsubscribe to the observable to prevent memory leaks, and it just results in less code. When we iterate over dogs, notice we're not using the async pipe since that was already unwrapped in the component. If we go into the app, we can see the results are identical for both collections. When you create subscriptions, it's, uh, good practice to unsubscribe when that data is no longer needed. If you use the async pipe like we did with cats, this will happen automatically. But with dogs, we built the subscription manually, so we want to end that description when the component's no longer in use. We can do this by setting the subscription to its own variable, then listen for the onDestroy lifecycle hook, and call unsubscribe.
The next concept I wanna talk about is mapping observables. This allows you to transform data before you subscribe to it. The first thing we'll do is transform a list observable of cats into a number based on the length of that collection. So first, we obtain the list observable from Firebase, Then we call map, and that will emit an array, which we can just call length on, and that'll return a number representing the length of that collection.
data
In the next example, we take a dog as an object observable, then map its name just to a single string. As you can see, the map operator is very powerful. You can use it to transform any type of asynchronous data into the format that you want. Going back to the HTML, we can just call these observables with the async pipe and get their mapped values back.
Going back into the app, we can see the observable is transformed into a string and a number as expected. Now let's talk about the switch map operator. This allows us to handle data relationships that exist between 2 independent streams. A common example in Firebase is when you need the auth observable to emit the current user before he can query some other data. We're going to simulate that situation here by taking an object observable of a human, Then use the name from that observable to query the pets owned by that human. So switch map is kind of like subscribing to the first observable and then using that data to return a second observable.
data
robotics
So we set this whole thing equal to the dogs variable, then iterate over it in the template like normal with the async pipe.
Back in the app, we can see the dogs observable only emits the 2 dogs that match this human owner name. In some cases, you might find yourself needing to combine 2 observables into 1. RxJS has several different combination operators, but we'll just be focusing on combine latest for this example.
dogs
animals
We will pull 2 different object observables from Firebase and then combine them into a new observable called animals. In this case, I use the static method from the observable class to pass both of these object observables as arguments. This results in a observable with an array that we can iterate over in the template. If we go back to the app, we can see we have 1 cat and 1 dog in an array even though they come from completely different collections in Firebase. The final topic I wanna cover is about behavior subjects, which allow us to share current data throughout an Angular app. I'll be going over this very quickly, so I also recommend checking out the JavaScript evangelist and his video on behavior subjects.
Check out the link in the description. A behavior subject is just an observable that we can push data to. It also has a concept of a current value, which is very useful for real time app development because you generally want the most up to date information displayed in the app.
data
data management
psychology
In this example, we're gonna create a new variable called Current dog, which is a behavior subject, and it gets updated whenever you click on the dog's image. This may seem trivial in this example, but when you use a behavior subject In an Angular service, you can then share current data throughout the application. We push new data to the behavior subject by calling next, and that will update any observers throughout the app. In the template, we allow the user to change the current dog or the value of the behavior subject by clicking on a dog's image. Then we unwrap the behavior subject with the async pipe just like we would with any other observable. But also notice how we use that question mark before calling any attributes because the default value is null, so we don't wanna call an attribute that doesn't exist. Now if we go back into the app, we can see when we click on a dog's image, it updates the The current dog with that data. That's it for my top 7 RxJS patterns for Angular Firebase developers. If this video helped you, please like and subscribe. And if you wanna support the channel, Consider becoming a pro member at angularfirebase.com. Thanks for watching and I'll see you next time.
RxJS is a huge library with a very steep learning curve. In this episode, I'm going to talk about a few key concepts that are specific to Angular Firebase developers. I believe it's best to focus on what you actually need to learn rather than try to master the entire RxJS library. To do this, I've created a simple component that uses the AngularFire 2 package to retrieve cats and dogs from Firebase. Cats and dogs each have their own collection, and there's another collection for humans, which represent the owner of a given pet. Your component should look something like this. We import the AngularFire database and then inject it in the constructor. When using RxJS and Angular, You only import the methods and classes that you need. In RxJS, there are 2 types of methods, static and instance. In this first example, we use an instance method, combineLatest. So we create 2 instances of an observable, then we can use that operator on the observable instance itself. Notice how the method was imported from add slash operator. The operator directory contains all of the instance methods. It's not important to know at this point, but using combineLatest will result in an observable array of 2 strings. Now let's accomplish the same thing using a static method. To obtain the static method, we import from the add slash observable directory. Instead of calling the method on an instance, we call it on the observable class itself, and then we pass the 2 observables to it as arguments. In RxJS, some methods are only instance, others are only static, and some overlap for both. Now let's talk about subscriptions. That's how you actually extract data from observables. There are 2 main ways to do this in Angular. You can either subscribe in the component TypeScript or in the component HTML. In this example, we will subscribe to cats in the HTML and dogs in the component typescript. Notice how cats are a Firebase list observable and dogs are the regular array. Calling db list will return an observable from the Firebase database. For cats, we just keep it as is, but for dogs, we call Subscribe, which will cause the observable to emit an array of dogs that we can set as the variable on this component. To subscribe to cats, we do this in the template itself by using the async pipe provided by Angular. Under the hood, this is subscribing to the observable just like we did in the TypeScript for dogs. It's generally preferred to use the async pipe when possible because it will also unsubscribe to the observable to prevent memory leaks, and it just results in less code. When we iterate over dogs, notice we're not using the async pipe since that was already unwrapped in the component. If we go into the app, we can see the results are identical for both collections. When you create subscriptions, it's, uh, good practice to unsubscribe when that data is no longer needed. If you use the async pipe like we did with cats, this will happen automatically. But with dogs, we built the subscription manually, so we want to end that description when the component's no longer in use. We can do this by setting the subscription to its own variable, then listen for the onDestroy lifecycle hook, and call unsubscribe. The next concept I wanna talk about is mapping observables. This allows you to transform data before you subscribe to it. The first thing we'll do is transform a list observable of cats into a number based on the length of that collection. So first, we obtain the list observable from Firebase, Then we call map, and that will emit an array, which we can just call length on, and that'll return a number representing the length of that collection. In the next example, we take a dog as an object observable, then map its name just to a single string. As you can see, the map operator is very powerful. You can use it to transform any type of asynchronous data into the format that you want. Going back to the HTML, we can just call these observables with the async pipe and get their mapped values back. Going back into the app, we can see the observable is transformed into a string and a number as expected. Now let's talk about the switch map operator. This allows us to handle data relationships that exist between 2 independent streams. A common example in Firebase is when you need the auth observable to emit the current user before he can query some other data. We're going to simulate that situation here by taking an object observable of a human, Then use the name from that observable to query the pets owned by that human. So switch map is kind of like subscribing to the first observable and then using that data to return a second observable. So we set this whole thing equal to the dogs variable, then iterate over it in the template like normal with the async pipe. Back in the app, we can see the dogs observable only emits the 2 dogs that match this human owner name. In some cases, you might find yourself needing to combine 2 observables into 1. RxJS has several different combination operators, but we'll just be focusing on combine latest for this example. We will pull 2 different object observables from Firebase and then combine them into a new observable called animals. In this case, I use the static method from the observable class to pass both of these object observables as arguments. This results in a observable with an array that we can iterate over in the template. If we go back to the app, we can see we have 1 cat and 1 dog in an array even though they come from completely different collections in Firebase. The final topic I wanna cover is about behavior subjects, which allow us to share current data throughout an Angular app. I'll be going over this very quickly, so I also recommend checking out the JavaScript evangelist and his video on behavior subjects. Check out the link in the description. A behavior subject is just an observable that we can push data to. It also has a concept of a current value, which is very useful for real time app development because you generally want the most up to date information displayed in the app. In this example, we're gonna create a new variable called Current dog, which is a behavior subject, and it gets updated whenever you click on the dog's image. This may seem trivial in this example, but when you use a behavior subject In an Angular service, you can then share current data throughout the application. We push new data to the behavior subject by calling next, and that will update any observers throughout the app. In the template, we allow the user to change the current dog or the value of the behavior subject by clicking on a dog's image. Then we unwrap the behavior subject with the async pipe just like we would with any other observable. But also notice how we use that question mark before calling any attributes because the default value is null, so we don't wanna call an attribute that doesn't exist. Now if we go back into the app, we can see when we click on a dog's image, it updates the The current dog with that data. That's it for my top 7 RxJS patterns for Angular Firebase developers. If this video helped you, please like and subscribe. And if you wanna support the channel, Consider becoming a pro member at angularfirebase.com. Thanks for watching and I'll see you next time.
RxJS
rxjs
is
is
a
a
huge
huge
library
library
with
with
a
a
very
very
steep
steep
learning
learning
curve.
curve
In
in
this
this
episode,
episode
I'm
i'm
going
going
to
to
talk
talk
about
about
a
a
few
few
key
key
concepts
concepts
that
that
are
are
specific
specific
to
to
Angular
angular
Firebase
firebase
developers.
developers
I
i
believe
believe
it's
it's
best
best
to
to
focus
focus
on
on
what
what
you
you
actually
actually
need
need
to
to
learn
learn
rather
rather
than
than
try
try
to
to
master
master
the
the
entire
entire
RxJS
rxjs
library.
library
To
to
do
do
this,
this
I've
i've
created
created
a
a
simple
simple
component
component
that
that
uses
uses
the
the
AngularFire
angularfire
2
2
package
package
to
to
retrieve
retrieve
cats
cats
and
and
dogs
dogs
from
from
Firebase.
firebase
Cats
cats
and
and
dogs
dogs
each
each
have
have
their
their
own
own
collection,
collection
and
and
there's
there's
another
another
collection
collection
for
for
humans,
humans
which
which
represent
represent
the
the
owner
owner
of
of
a
a
given
given
pet.
pet
Your
your
component
component
should
should
look
look
something
something
like
like
this.
this
We
we
import
import
the
the
AngularFire
angularfire
database
database
and
and
then
then
inject
inject
it
it
in
in
the
the
constructor.
constructor
When
when
using
using
RxJS
rxjs
and
and
Angular,
angular
You
you
only
only
import
import
the
the
methods
methods
and
and
classes
classes
that
that
you
you
need.
need
In
in
RxJS,
rxjs
there
there
are
are
2
2
types
types
of
of
methods,
methods
static
static
and
and
instance.
instance
In
in
this
this
first
first
example,
example
we
we
use
use
an
an
instance
instance
method,
method
combineLatest.
combinelatest
So
so
we
we
create
create
2
2
instances
instances
of
of
an
an
observable,
observable
then
then
we
we
can
can
use
use
that
that
operator
operator
on
on
the
the
observable
observable
instance
instance
itself.
itself
Notice
notice
how
how
the
the
method
method
was
was
imported
imported
from
from
add
add
slash
slash
operator.
operator
The
the
operator
operator
directory
directory
contains
contains
all
all
of
of
the
the
instance
instance
methods.
methods
It's
it's
not
not
important
important
to
to
know
know
at
at
this
this
point,
point
but
but
using
using
combineLatest
combinelatest
will
will
result
result
in
in
an
an
observable
observable
array
array
of
of
2
2
strings.
strings
Now
now
let's
let's
accomplish
accomplish
the
the
same
same
thing
thing
using
using
a
a
static
static
method.
method
To
to
obtain
obtain
the
the
static
static
method,
method
we
we
import
import
from
from
the
the
add
add
slash
slash
observable
observable
directory.
directory
Instead
instead
of
of
calling
calling
the
the
method
method
on
on
an
an
instance,
instance
we
we
call
call
it
it
on
on
the
the
observable
observable
class
class
itself,
itself
and
and
then
then
we
we
pass
pass
the
the
2
2
observables
observables
to
to
it
it
as
as
arguments.
arguments
In
in
RxJS,
rxjs
some
some
methods
methods
are
are
only
only
instance,
instance
others
others
are
are
only
only
static,
static
and
and
some
some
overlap
overlap
for
for
both.
both
Now
now
let's
let's
talk
talk
about
about
subscriptions.
subscriptions
That's
that's
how
how
you
you
actually
actually
extract
extract
data
data
from
from
observables.
observables
There
there
are
are
2
2
main
main
ways
ways
to
to
do
do
this
this
in
in
Angular.
angular
You
you
can
can
either
either
subscribe
subscribe
in
in
the
the
component
component
TypeScript
typescript
or
or
in
in
the
the
component
component
HTML.
html
In
in
this
this
example,
example
we
we
will
will
subscribe
subscribe
to
to
cats
cats
in
in
the
the
HTML
html
and
and
dogs
dogs
in
in
the
the
component
component
typescript.
typescript
Notice
notice
how
how
cats
cats
are
are
a
a
Firebase
firebase
list
list
observable
observable
and
and
dogs
dogs
are
are
the
the
regular
regular
array.
array
Calling
calling
db
db
list
list
will
will
return
return
an
an
observable
observable
from
from
the
the
Firebase
firebase
database.
database
For
for
cats,
cats
we
we
just
just
keep
keep
it
it
as
as
is,
is
but
but
for
for
dogs,
dogs
we
we
call
call
Subscribe,
subscribe
which
which
will
will
cause
cause
the
the
observable
observable
to
to
emit
emit
an
an
array
array
of
of
dogs
dogs
that
that
we
we
can
can
set
set
as
as
the
the
variable
variable
on
on
this
this
component.
component
To
to
subscribe
subscribe
to
to
cats,
cats
we
we
do
do
this
this
in
in
the
the
template
template
itself
itself
by
by
using
using
the
the
async
async
pipe
pipe
provided
provided
by
by
Angular.
angular
Under
under
the
the
hood,
hood
this
this
is
is
subscribing
subscribing
to
to
the
the
observable
observable
just
just
like
like
we
we
did
did
in
in
the
the
TypeScript
typescript
for
for
dogs.
dogs
It's
it's
generally
generally
preferred
preferred
to
to
use
use
the
the
async
async
pipe
pipe
when
when
possible
possible
because
because
it
it
will
will
also
also
unsubscribe
unsubscribe
to
to
the
the
observable
observable
to
to
prevent
prevent
memory
memory
leaks,
leaks
and
and
it
it
just
just
results
results
in
in
less
less
code.
code
When
when
we
we
iterate
iterate
over
over
dogs,
dogs
notice
notice
we're
we're
not
not
using
using
the
the
async
async
pipe
pipe
since
since
that
that
was
was
already
already
unwrapped
unwrapped
in
in
the
the
component.
component
If
if
we
we
go
go
into
into
the
the
app,
app
we
we
can
can
see
see
the
the
results
results
are
are
identical
identical
for
for
both
both
collections.
collections
When
when
you
you
create
create
subscriptions,
subscriptions
it's,
it's
uh,
uh
good
good
practice
practice
to
to
unsubscribe
unsubscribe
when
when
that
that
data
data
is
is
no
no
longer
longer
needed.
needed
If
if
you
you
use
use
the
the
async
async
pipe
pipe
like
like
we
we
did
did
with
with
cats,
cats
this
this
will
will
happen
happen
automatically.
automatically
But
but
with
with
dogs,
dogs
we
we
built
built
the
the
subscription
subscription
manually,
manually
so
so
we
we
want
want
to
to
end
end
that
that
description
description
when
when
the
the
component's
component's
no
no
longer
longer
in
in
use.
use
We
we
can
can
do
do
this
this
by
by
setting
setting
the
the
subscription
subscription
to
to
its
its
own
own
variable,
variable
then
then
listen
listen
for
for
the
the
onDestroy
ondestroy
lifecycle
lifecycle
hook,
hook
and
and
call
call
unsubscribe.
unsubscribe
The
the
next
next
concept
concept
I
i
wanna
wanna
talk
talk
about
about
is
is
mapping
mapping
observables.
observables
This
this
allows
allows
you
you
to
to
transform
transform
data
data
before
before
you
you
subscribe
subscribe
to
to
it.
it
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
transform
transform
a
a
list
list
observable
observable
of
of
cats
cats
into
into
a
a
number
number
based
based
on
on
the
the
length
length
of
of
that
that
collection.
collection
So
so
first,
first
we
we
obtain
obtain
the
the
list
list
observable
observable
from
from
Firebase,
firebase
Then
then
we
we
call
call
map,
map
and
and
that
that
will
will
emit
emit
an
an
array,
array
which
which
we
we
can
can
just
just
call
call
length
length
on,
on
and
and
that'll
that'll
return
return
a
a
number
number
representing
representing
the
the
length
length
of
of
that
that
collection.
collection
In
in
the
the
next
next
example,
example
we
we
take
take
a
a
dog
dog
as
as
an
an
object
object
observable,
observable
then
then
map
map
its
its
name
name
just
just
to
to
a
a
single
single
string.
string
As
as
you
you
can
can
see,
see
the
the
map
map
operator
operator
is
is
very
very
powerful.
powerful
You
you
can
can
use
use
it
it
to
to
transform
transform
any
any
type
type
of
of
asynchronous
asynchronous
data
data
into
into
the
the
format
format
that
that
you
you
want.
want
Going
going
back
back
to
to
the
the
HTML,
html
we
we
can
can
just
just
call
call
these
these
observables
observables
with
with
the
the
async
async
pipe
pipe
and
and
get
get
their
their
mapped
mapped
values
values
back.
back
Going
going
back
back
into
into
the
the
app,
app
we
we
can
can
see
see
the
the
observable
observable
is
is
transformed
transformed
into
into
a
a
string
string
and
and
a
a
number
number
as
as
expected.
expected
Now
now
let's
let's
talk
talk
about
about
the
the
switch
switch
map
map
operator.
operator
This
this
allows
allows
us
us
to
to
handle
handle
data
data
relationships
relationships
that
that
exist
exist
between
between
2
2
independent
independent
streams.
streams
A
a
common
common
example
example
in
in
Firebase
firebase
is
is
when
when
you
you
need
need
the
the
auth
auth
observable
observable
to
to
emit
emit
the
the
current
current
user
user
before
before
he
he
can
can
query
query
some
some
other
other
data.
data
We're
we're
going
going
to
to
simulate
simulate
that
that
situation
situation
here
here
by
by
taking
taking
an
an
object
object
observable
observable
of
of
a
a
human,
human
Then
then
use
use
the
the
name
name
from
from
that
that
observable
observable
to
to
query
query
the
the
pets
pets
owned
owned
by
by
that
that
human.
human
So
so
switch
switch
map
map
is
is
kind
kind
of
of
like
like
subscribing
subscribing
to
to
the
the
first
first
observable
observable
and
and
then
then
using
using
that
that
data
data
to
to
return
return
a
a
second
second
observable.
observable
So
so
we
we
set
set
this
this
whole
whole
thing
thing
equal
equal
to
to
the
the
dogs
dogs
variable,
variable
then
then
iterate
iterate
over
over
it
it
in
in
the
the
template
template
like
like
normal
normal
with
with
the
the
async
async
pipe.
pipe
Back
back
in
in
the
the
app,
app
we
we
can
can
see
see
the
the
dogs
dogs
observable
observable
only
only
emits
emits
the
the
2
2
dogs
dogs
that
that
match
match
this
this
human
human
owner
owner
name.
name
In
in
some
some
cases,
cases
you
you
might
might
find
find
yourself
yourself
needing
needing
to
to
combine
combine
2
2
observables
observables
into
into
1.
1
RxJS
rxjs
has
has
several
several
different
different
combination
combination
operators,
operators
but
but
we'll
we'll
just
just
be
be
focusing
focusing
on
on
combine
combine
latest
latest
for
for
this
this
example.
example
We
we
will
will
pull
pull
2
2
different
different
object
object
observables
observables
from
from
Firebase
firebase
and
and
then
then
combine
combine
them
them
into
into
a
a
new
new
observable
observable
called
called
animals.
animals
In
in
this
this
case,
case
I
i
use
use
the
the
static
static
method
method
from
from
the
the
observable
observable
class
class
to
to
pass
pass
both
both
of
of
these
these
object
object
observables
observables
as
as
arguments.
arguments
This
this
results
results
in
in
a
a
observable
observable
with
with
an
an
array
array
that
that
we
we
can
can
iterate
iterate
over
over
in
in
the
the
template.
template
If
if
we
we
go
go
back
back
to
to
the
the
app,
app
we
we
can
can
see
see
we
we
have
have
1
1
cat
cat
and
and
1
1
dog
dog
in
in
an
an
array
array
even
even
though
though
they
they
come
come
from
from
completely
completely
different
different
collections
collections
in
in
Firebase.
firebase
The
the
final
final
topic
topic
I
i
wanna
wanna
cover
cover
is
is
about
about
behavior
behavior
subjects,
subjects
which
which
allow
allow
us
us
to
to
share
share
current
current
data
data
throughout
throughout
an
an
Angular
angular
app.
app
I'll
i'll
be
be
going
going
over
over
this
this
very
very
quickly,
quickly
so
so
I
i
also
also
recommend
recommend
checking
checking
out
out
the
the
JavaScript
javascript
evangelist
evangelist
and
and
his
his
video
video
on
on
behavior
behavior
subjects.
subjects
Check
check
out
out
the
the
link
link
in
in
the
the
description.
description
A
a
behavior
behavior
subject
subject
is
is
just
just
an
an
observable
observable
that
that
we
we
can
can
push
push
data
data
to.
to
It
it
also
also
has
has
a
a
concept
concept
of
of
a
a
current
current
value,
value
which
which
is
is
very
very
useful
useful
for
for
real
real
time
time
app
app
development
development
because
because
you
you
generally
generally
want
want
the
the
most
most
up
up
to
to
date
date
information
information
displayed
displayed
in
in
the
the
app.
app
In
in
this
this
example,
example
we're
we're
gonna
gonna
create
create
a
a
new
new
variable
variable
called
called
Current
current
dog,
dog
which
which
is
is
a
a
behavior
behavior
subject,
subject
and
and
it
it
gets
gets
updated
updated
whenever
whenever
you
you
click
click
on
on
the
the
dog's
dog's
image.
image
This
this
may
may
seem
seem
trivial
trivial
in
in
this
this
example,
example
but
but
when
when
you
you
use
use
a
a
behavior
behavior
subject
subject
In
in
an
an
Angular
angular
service,
service
you
you
can
can
then
then
share
share
current
current
data
data
throughout
throughout
the
the
application.
application
We
we
push
push
new
new
data
data
to
to
the
the
behavior
behavior
subject
subject
by
by
calling
calling
next,
next
and
and
that
that
will
will
update
update
any
any
observers
observers
throughout
throughout
the
the
app.
app
In
in
the
the
template,
template
we
we
allow
allow
the
the
user
user
to
to
change
change
the
the
current
current
dog
dog
or
or
the
the
value
value
of
of
the
the
behavior
behavior
subject
subject
by
by
clicking
clicking
on
on
a
a
dog's
dog's
image.
image
Then
then
we
we
unwrap
unwrap
the
the
behavior
behavior
subject
subject
with
with
the
the
async
async
pipe
pipe
just
just
like
like
we
we
would
would
with
with
any
any
other
other
observable.
observable
But
but
also
also
notice
notice
how
how
we
we
use
use
that
that
question
question
mark
mark
before
before
calling
calling
any
any
attributes
attributes
because
because
the
the
default
default
value
value
is
is
null,
null
so
so
we
we
don't
don't
wanna
wanna
call
call
an
an
attribute
attribute
that
that
doesn't
doesn't
exist.
exist
Now
now
if
if
we
we
go
go
back
back
into
into
the
the
app,
app
we
we
can
can
see
see
when
when
we
we
click
click
on
on
a
a
dog's
dog's
image,
image
it
it
updates
updates
the
the
The
the
current
current
dog
dog
with
with
that
that
data.
data
That's
that's
it
it
for
for
my
my
top
top
7
7
RxJS
rxjs
patterns
patterns
for
for
Angular
angular
Firebase
firebase
developers.
developers
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
Consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
In this video, the speaker discusses the concept of RxJS and how it can be used to extract data from Angular. They explain how subscriptions and subscriptions can be used to extract data from Angular and how to transform data before subscribing to a method. The speaker also discusses the concept of a behavior subject and how it can be used to update data in an Angular app.
Top 7 RxJS Concepts for Angular Developers
RxJS is a huge library with a very steep learning curve. In this episode, I'm going to talk about a few key concepts that are specific to Angular Firebase developers. I believe it's best to focus on what you actually need to learn rather than try to master the entire RxJS library. To do this, I've created a simple component that uses the AngularFire 2 package to retrieve cats and dogs from Firebase. Cats and dogs each have their own collection, and there's another collection for humans, which represent the owner of a given pet. Your component should look something like this. We import the AngularFire database and then inject it in the constructor. When using RxJS and Angular, You only import the methods and classes that you need. In RxJS, there are 2 types of methods, static and instance. In this first example, we use an instance method, combineLatest. So we create 2 instances of an observable, then we can use that operator on the observable instance itself. Notice how the method was imported from add slash operator. The operator directory contains all of the instance methods. It's not important to know at this point, but using combineLatest will result in an observable array of 2 strings. Now let's accomplish the same thing using a static method. To obtain the static method, we import from the add slash observable directory. Instead of calling the method on an instance, we call it on the observable class itself, and then we pass the 2 observables to it as arguments. In RxJS, some methods are only instance, others are only static, and some overlap for both. Now let's talk about subscriptions. That's how you actually extract data from observables. There are 2 main ways to do this in Angular. You can either subscribe in the component TypeScript or in the component HTML. In this example, we will subscribe to cats in the HTML and dogs in the component typescript. Notice how cats are a Firebase list observable and dogs are the regular array. Calling db list will return an observable from the Firebase database. For cats, we just keep it as is, but for dogs, we call Subscribe, which will cause the observable to emit an array of dogs that we can set as the variable on this component. To subscribe to cats, we do this in the template itself by using the async pipe provided by Angular. Under the hood, this is subscribing to the observable just like we did in the TypeScript for dogs. It's generally preferred to use the async pipe when possible because it will also unsubscribe to the observable to prevent memory leaks, and it just results in less code. When we iterate over dogs, notice we're not using the async pipe since that was already unwrapped in the component. If we go into the app, we can see the results are identical for both collections. When you create subscriptions, it's, uh, good practice to unsubscribe when that data is no longer needed. If you use the async pipe like we did with cats, this will happen automatically. But with dogs, we built the subscription manually, so we want to end that description when the component's no longer in use. We can do this by setting the subscription to its own variable, then listen for the onDestroy lifecycle hook, and call unsubscribe. The next concept I wanna talk about is mapping observables. This allows you to transform data before you subscribe to it. The first thing we'll do is transform a list observable of cats into a number based on the length of that collection. So first, we obtain the list observable from Firebase, Then we call map, and that will emit an array, which we can just call length on, and that'll return a number representing the length of that collection. In the next example, we take a dog as an object observable, then map its name just to a single string. As you can see, the map operator is very powerful. You can use it to transform any type of asynchronous data into the format that you want. Going back to the HTML, we can just call these observables with the async pipe and get their mapped values back. Going back into the app, we can see the observable is transformed into a string and a number as expected. Now let's talk about the switch map operator. This allows us to handle data relationships that exist between 2 independent streams. A common example in Firebase is when you need the auth observable to emit the current user before he can query some other data. We're going to simulate that situation here by taking an object observable of a human, Then use the name from that observable to query the pets owned by that human. So switch map is kind of like subscribing to the first observable and then using that data to return a second observable. So we set this whole thing equal to the dogs variable, then iterate over it in the template like normal with the async pipe. Back in the app, we can see the dogs observable only emits the 2 dogs that match this human owner name. In some cases, you might find yourself needing to combine 2 observables into 1. RxJS has several different combination operators, but we'll just be focusing on combine latest for this example. We will pull 2 different object observables from Firebase and then combine them into a new observable called animals. In this case, I use the static method from the observable class to pass both of these object observables as arguments. This results in a observable with an array that we can iterate over in the template. If we go back to the app, we can see we have 1 cat and 1 dog in an array even though they come from completely different collections in Firebase. The final topic I wanna cover is about behavior subjects, which allow us to share current data throughout an Angular app. I'll be going over this very quickly, so I also recommend checking out the JavaScript evangelist and his video on behavior subjects. Check out the link in the description. A behavior subject is just an observable that we can push data to. It also has a concept of a current value, which is very useful for real time app development because you generally want the most up to date information displayed in the app. In this example, we're gonna create a new variable called Current dog, which is a behavior subject, and it gets updated whenever you click on the dog's image. This may seem trivial in this example, but when you use a behavior subject In an Angular service, you can then share current data throughout the application. We push new data to the behavior subject by calling next, and that will update any observers throughout the app. In the template, we allow the user to change the current dog or the value of the behavior subject by clicking on a dog's image. Then we unwrap the behavior subject with the async pipe just like we would with any other observable. But also notice how we use that question mark before calling any attributes because the default value is null, so we don't wanna call an attribute that doesn't exist. Now if we go back into the app, we can see when we click on a dog's image, it updates the The current dog with that data. That's it for my top 7 RxJS patterns for Angular Firebase developers. If this video helped you, please like and subscribe. And if you wanna support the channel, Consider becoming a pro member at angularfirebase.com. Thanks for watching and I'll see you next time.
In this video, the speaker discusses the concept of RxJS and how it can be used to extract data from Angular. They explain how subscriptions and subscriptions can be used to extract data from Angular and how to transform data before subscribing to a method. The speaker also discusses the concept of a behavior subject and how it can be used to update data in an Angular app.