Learn how to load data asynchronously from Firebase on the scroll event. Grab the full lesson and code here: https://angularfirebase.com/lessons/infinite-scroll-with-firebase-data-and-angular-animation/

Check out ngx-Infinite-scroll package https://github.com/orizens/ngx-infinite-scroll
2024-02-04T08:15:04.902Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
ce73ec4d-37f4-4ac7-a598-fc8ce06fcb65
44bada0764d231deb9508a11dac2826c34fb168ff493c93ee959c117c276fe5e
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Infinite Scroll allows you to query data on the fly based on a user's scroll position, which is generally a better user experience than traditional pagination, and it's also easier for you as a developer to implement.
In this episode, we're going to build an infinite scroll feature in Angular 4 using Firebase on the back end.
To speed up the development process, we're going to use a package called n g x infinite scroll.
This will allow us to listen to as well as to throttle the scroll event, which is very useful when making our queries to Firebase.
You can install it by running npm install n g x infinite scroll.
And you can include it in your app module or whichever module is using it.
The module itself exports a directive which we can use in the HTML.
We'll get into this more later, but basically it listens for the scroll event on the window and then sends a scroll event that we can listen for.
At this point, let's start building the service.
It only has one responsibility, and that's to pull data from Firebase in this movies collection, which It's just a simple collection with some data about each movie.
So we can start by injecting the AngularFire database, and then we'll create a function to get movies.
The first argument is the batch size, and that's how many items we wanna pull for each query.
The last key argument is optional, and that represents the key from the previous set of records that we pulled.
Firebase doesn't have an equivalent to SQL's offset clause, so we need to pass it a specific key that tells it where to start the next query.
So if we get the last key as an argument, then we'll set it as the start app property before sending this query to Firebase.
So with that done, now we can start building the component, And we'll actually get started in the HTML first.
We're going to loop over the movies just like any other observable by passing it the async pipe.
Then underneath that loop, we'll create a div that has that infinite scroll directive that we looked at earlier.
The main thing to look at here is the infinite scroll throttle, which is 1,000 milliseconds or one second.
Then there's the scrolled event, which will emit when the user scrolls down on the page.
The reason we wanna throttle this event is because we'll actually be sending the Firebase query when this event goes off.
If we didn't throttle it, it'd be sending the same redundant query to Firebase every couple milliseconds, switch wouldn't be good.
And as a final touch, we'll add a loading spinner when there's still data left to be loaded and a notification message once we've reached the end of the database.
So now let's put this all together in the TypeScript.
We're going to need the movie service as well as a behavior subject and the lodash library.
We're going to use the behavior subject to replace a Firebase list observable.
This allows us to concatenate each new batch of data together as opposed to re querying the old data along with the new data each time.
The next variable we set is the batch, which is just the size we want for each query.
Then the last key is just the Firebase push key to offset the next query.
Then finished is a boolean that will tell us whether or not the database has any data left in it.
During ng on init, we'll load the initial data, and then we can call the same function in the on scroll event handler as well.
The purpose of GitMovies is to query data and then concatenate it to the existing behavior subject.
The first thing we'll do is see if the finished variable to true.
And if so, we'll just return null.
Otherwise, we'll try to make a query to the database.
So we'll call the movie service dot get movies.
Then we add one extra item to the batch.
And the reason for this is we need that extra item teases the key for any anticipated upcoming queries.
Then we can use the do operator to run some arbitrary code whenever this observable is subscribed to.
So the first thing we'll do is set the last key to that extra item that we queried.
And then once that's set, we can just slice it off the array using the Lodash slice operator.
So we just want the first 2 out of the 3 items we queried, so we pass it the array with 0 as the starting index and then the batch size is the ending index.
The cool thing about behavior subjects is you can just call get value to get whatever value is currently in that subject.
So we'll set that to the current movies variable, Then we'll see if the last key in each of these two arrays is identical.
And if so, we'll know we've reached the end of the database, and we can just flag that finished variable as true.
And the final step is to just update the value of the behavior subject itself, and we do that by concatenating the current movies to the new movies that we just queried.
And finally, to execute this code, we call take 1 because we only need to run this once and then call subscribe.
Now if we go back to the app we can see that whenever we scroll down the scrolled event fires in the console and it also loads the new movies from Firebase.
When there's no more data to load, it stops showing the loading spinner and instead shows that message that we've reached the end.
That's it for Angular 4 and Firebase.
If this video helped you, please like and subscribe.
And if you want support building your own Angular project, consider becoming a pro member at angularfirebase.com.
You'll get a free copy of my book as well as 1 on 1 project consulting.
Thanks for watching, and I'll see you soon.

Speaker 0: Infinite Scroll allows you to query data on the fly based on a user's scroll position, which is generally a better user experience than traditional pagination, and it's also easier for you as a developer to implement. In this episode, we're going to build an infinite scroll feature in Angular 4 using Firebase on the back end. To speed up the development process, we're going to use a package called n g x infinite scroll. This will allow us to listen to as well as to throttle the scroll event, which is very useful when making our queries to Firebase. You can install it by running npm install n g x infinite scroll.

And you can include it in your app module or whichever module is using it. The module itself exports a directive which we can use in the HTML. We'll get into this more later, but basically it listens for the scroll event on the window and then sends a scroll event that we can listen for. At this point, let's start building the service. It only has one responsibility, and that's to pull data from Firebase in this movies collection, which It's just a simple collection with some data about each movie.

So we can start by injecting the AngularFire database, and then we'll create a function to get movies. The first argument is the batch size, and that's how many items we wanna pull for each query. The last key argument is optional, and that represents the key from the previous set of records that we pulled. Firebase doesn't have an equivalent to SQL's offset clause, so we need to pass it a specific key that tells it where to start the next query. So if we get the last key as an argument, then we'll set it as the start app property before sending this query to Firebase.

So with that done, now we can start building the component, And we'll actually get started in the HTML first. We're going to loop over the movies just like any other observable by passing it the async pipe. Then underneath that loop, we'll create a div that has that infinite scroll directive that we looked at earlier. The main thing to look at here is the infinite scroll throttle, which is 1,000 milliseconds or one second. Then there's the scrolled event, which will emit when the user scrolls down on the page.

The reason we wanna throttle this event is because we'll actually be sending the Firebase query when this event goes off. If we didn't throttle it, it'd be sending the same redundant query to Firebase every couple milliseconds, switch wouldn't be good. And as a final touch, we'll add a loading spinner when there's still data left to be loaded and a notification message once we've reached the end of the database. So now let's put this all together in the TypeScript. We're going to need the movie service as well as a behavior subject and the lodash library.

We're going to use the behavior subject to replace a Firebase list observable. This allows us to concatenate each new batch of data together as opposed to re querying the old data along with the new data each time. The next variable we set is the batch, which is just the size we want for each query. Then the last key is just the Firebase push key to offset the next query. Then finished is a boolean that will tell us whether or not the database has any data left in it.

During ng on init, we'll load the initial data, and then we can call the same function in the on scroll event handler as well. The purpose of GitMovies is to query data and then concatenate it to the existing behavior subject. The first thing we'll do is see if the finished variable to true. And if so, we'll just return null. Otherwise, we'll try to make a query to the database.

So we'll call the movie service dot get movies. Then we add one extra item to the batch. And the reason for this is we need that extra item teases the key for any anticipated upcoming queries. Then we can use the do operator to run some arbitrary code whenever this observable is subscribed to. So the first thing we'll do is set the last key to that extra item that we queried.

And then once that's set, we can just slice it off the array using the Lodash slice operator. So we just want the first 2 out of the 3 items we queried, so we pass it the array with 0 as the starting index and then the batch size is the ending index. The cool thing about behavior subjects is you can just call get value to get whatever value is currently in that subject. So we'll set that to the current movies variable, Then we'll see if the last key in each of these two arrays is identical. And if so, we'll know we've reached the end of the database, and we can just flag that finished variable as true.

And the final step is to just update the value of the behavior subject itself, and we do that by concatenating the current movies to the new movies that we just queried. And finally, to execute this code, we call take 1 because we only need to run this once and then call subscribe. Now if we go back to the app we can see that whenever we scroll down the scrolled event fires in the console and it also loads the new movies from Firebase. When there's no more data to load, it stops showing the loading spinner and instead shows that message that we've reached the end. That's it for Angular 4 and Firebase.

If this video helped you, please like and subscribe. And if you want support building your own Angular project, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you soon.
Infinite Scroll allows you to query data on the fly based on a user's scroll position, which is generally a better user experience than traditional pagination, and it's also easier for you as a developer to implement. In this episode, we're going to build an infinite scroll feature in Angular 4 using Firebase on the back end. To speed up the development process, we're going to use a package called n g x infinite scroll. This will allow us to listen to as well as to throttle the scroll event, which is very useful when making our queries to Firebase. You can install it by running npm install n g x infinite scroll. And you can include it in your app module or whichever module is using it.
The module itself exports a directive which we can use in the HTML. We'll get into this more later, but basically it listens for the scroll event on the window and then sends a scroll event that we can listen for. At this point, let's start building the service. It only has one responsibility, and that's to pull data from Firebase in this movies collection, which It's just a simple collection with some data about each movie.
programming
So we can start by injecting the AngularFire database, and then we'll create a function to get movies. The first argument is the batch size, and that's how many items we wanna pull for each query. The last key argument is optional, and that represents the key from the previous set of records that we pulled. Firebase doesn't have an equivalent to SQL's offset clause, so we need to pass it a specific key that tells it where to start the next query. So if we get the last key as an argument, then we'll set it as the start app property before sending this query to Firebase. So with that done, now we can start building the component, And we'll actually get started in the HTML first. We're going to loop over the movies just like any other observable by passing it the async pipe. Then underneath that loop, we'll create a div that has that infinite scroll directive that we looked at earlier. The main thing to look at here is the infinite scroll throttle, which is 1,000 milliseconds or one second. Then there's the scrolled event, which will emit when the user scrolls down on the page. The reason we wanna throttle this event is because we'll actually be sending the Firebase query when this event goes off. If we didn't throttle it, it'd be sending the same redundant query to Firebase every couple milliseconds, switch wouldn't be good. And as a final touch, we'll add a loading spinner when there's still data left to be loaded and a notification message once we've reached the end of the database.
So now let's put this all together in the TypeScript. We're going to need the movie service as well as a behavior subject and the lodash library. We're going to use the behavior subject to replace a Firebase list observable. This allows us to concatenate each new batch of data together as opposed to re querying the old data along with the new data each time. The next variable we set is the batch, which is just the size we want for each query.
data
programming
databases
Then the last key is just the Firebase push key to offset the next query.
Then finished is a boolean that will tell us whether or not the database has any data left in it. During ng on init, we'll load the initial data, and then we can call the same function in the on scroll event handler as well. The purpose of GitMovies is to query data and then concatenate it to the existing behavior subject.
databases
data
data management
The first thing we'll do is see if the finished variable to true. And if so, we'll just return null. Otherwise, we'll try to make a query to the database. So we'll call the movie service dot get movies. Then we add one extra item to the batch. And the reason for this is we need that extra item teases the key for any anticipated upcoming queries. Then we can use the do operator to run some arbitrary code whenever this observable is subscribed to. So the first thing we'll do is set the last key to that extra item that we queried. And then once that's set, we can just slice it off the array using the Lodash slice operator. So we just want the first 2 out of the 3 items we queried, so we pass it the array with 0 as the starting index and then the batch size is the ending index.
The cool thing about behavior subjects is you can just call get value to get whatever value is currently in that subject. So we'll set that to the current movies variable, Then we'll see if the last key in each of these two arrays is identical. And if so, we'll know we've reached the end of the database, and we can just flag that finished variable as true. And the final step is to just update the value of the behavior subject itself, and we do that by concatenating the current movies to the new movies that we just queried.
data
And finally, to execute this code, we call take 1 because we only need to run this once and then call subscribe. Now if we go back to the app we can see that whenever we scroll down the scrolled event fires in the console and it also loads the new movies from Firebase. When there's no more data to load, it stops showing the loading spinner and instead shows that message that we've reached the end. That's it for Angular 4 and Firebase. If this video helped you, please like and subscribe. And if you want support building your own Angular project, consider becoming a pro member at angularfirebase.com.
You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you soon.
Infinite Scroll allows you to query data on the fly based on a user's scroll position, which is generally a better user experience than traditional pagination, and it's also easier for you as a developer to implement. In this episode, we're going to build an infinite scroll feature in Angular 4 using Firebase on the back end. To speed up the development process, we're going to use a package called n g x infinite scroll. This will allow us to listen to as well as to throttle the scroll event, which is very useful when making our queries to Firebase. You can install it by running npm install n g x infinite scroll. And you can include it in your app module or whichever module is using it. The module itself exports a directive which we can use in the HTML. We'll get into this more later, but basically it listens for the scroll event on the window and then sends a scroll event that we can listen for. At this point, let's start building the service. It only has one responsibility, and that's to pull data from Firebase in this movies collection, which It's just a simple collection with some data about each movie. So we can start by injecting the AngularFire database, and then we'll create a function to get movies. The first argument is the batch size, and that's how many items we wanna pull for each query. The last key argument is optional, and that represents the key from the previous set of records that we pulled. Firebase doesn't have an equivalent to SQL's offset clause, so we need to pass it a specific key that tells it where to start the next query. So if we get the last key as an argument, then we'll set it as the start app property before sending this query to Firebase. So with that done, now we can start building the component, And we'll actually get started in the HTML first. We're going to loop over the movies just like any other observable by passing it the async pipe. Then underneath that loop, we'll create a div that has that infinite scroll directive that we looked at earlier. The main thing to look at here is the infinite scroll throttle, which is 1,000 milliseconds or one second. Then there's the scrolled event, which will emit when the user scrolls down on the page. The reason we wanna throttle this event is because we'll actually be sending the Firebase query when this event goes off. If we didn't throttle it, it'd be sending the same redundant query to Firebase every couple milliseconds, switch wouldn't be good. And as a final touch, we'll add a loading spinner when there's still data left to be loaded and a notification message once we've reached the end of the database. So now let's put this all together in the TypeScript. We're going to need the movie service as well as a behavior subject and the lodash library. We're going to use the behavior subject to replace a Firebase list observable. This allows us to concatenate each new batch of data together as opposed to re querying the old data along with the new data each time. The next variable we set is the batch, which is just the size we want for each query. Then the last key is just the Firebase push key to offset the next query. Then finished is a boolean that will tell us whether or not the database has any data left in it. During ng on init, we'll load the initial data, and then we can call the same function in the on scroll event handler as well. The purpose of GitMovies is to query data and then concatenate it to the existing behavior subject. The first thing we'll do is see if the finished variable to true. And if so, we'll just return null. Otherwise, we'll try to make a query to the database. So we'll call the movie service dot get movies. Then we add one extra item to the batch. And the reason for this is we need that extra item teases the key for any anticipated upcoming queries. Then we can use the do operator to run some arbitrary code whenever this observable is subscribed to. So the first thing we'll do is set the last key to that extra item that we queried. And then once that's set, we can just slice it off the array using the Lodash slice operator. So we just want the first 2 out of the 3 items we queried, so we pass it the array with 0 as the starting index and then the batch size is the ending index. The cool thing about behavior subjects is you can just call get value to get whatever value is currently in that subject. So we'll set that to the current movies variable, Then we'll see if the last key in each of these two arrays is identical. And if so, we'll know we've reached the end of the database, and we can just flag that finished variable as true. And the final step is to just update the value of the behavior subject itself, and we do that by concatenating the current movies to the new movies that we just queried. And finally, to execute this code, we call take 1 because we only need to run this once and then call subscribe. Now if we go back to the app we can see that whenever we scroll down the scrolled event fires in the console and it also loads the new movies from Firebase. When there's no more data to load, it stops showing the loading spinner and instead shows that message that we've reached the end. That's it for Angular 4 and Firebase. If this video helped you, please like and subscribe. And if you want support building your own Angular project, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you soon.
Infinite
infinite
Scroll
scroll
allows
allows
you
you
to
to
query
query
data
data
on
on
the
the
fly
fly
based
based
on
on
a
a
user's
user's
scroll
scroll
position,
position
which
which
is
is
generally
generally
a
a
better
better
user
user
experience
experience
than
than
traditional
traditional
pagination,
pagination
and
and
it's
it's
also
also
easier
easier
for
for
you
you
as
as
a
a
developer
developer
to
to
implement.
implement
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
build
build
an
an
infinite
infinite
scroll
scroll
feature
feature
in
in
Angular
angular
4
4
using
using
Firebase
firebase
on
on
the
the
back
back
end.
end
To
to
speed
speed
up
up
the
the
development
development
process,
process
we're
we're
going
going
to
to
use
use
a
a
package
package
called
called
n
n
g
g
x
x
infinite
infinite
scroll.
scroll
This
this
will
will
allow
allow
us
us
to
to
listen
listen
to
to
as
as
well
well
as
as
to
to
throttle
throttle
the
the
scroll
scroll
event,
event
which
which
is
is
very
very
useful
useful
when
when
making
making
our
our
queries
queries
to
to
Firebase.
firebase
You
you
can
can
install
install
it
it
by
by
running
running
npm
npm
install
install
n
n
g
g
x
x
infinite
infinite
scroll.
scroll
And
and
you
you
can
can
include
include
it
it
in
in
your
your
app
app
module
module
or
or
whichever
whichever
module
module
is
is
using
using
it.
it
The
the
module
module
itself
itself
exports
exports
a
a
directive
directive
which
which
we
we
can
can
use
use
in
in
the
the
HTML.
html
We'll
we'll
get
get
into
into
this
this
more
more
later,
later
but
but
basically
basically
it
it
listens
listens
for
for
the
the
scroll
scroll
event
event
on
on
the
the
window
window
and
and
then
then
sends
sends
a
a
scroll
scroll
event
event
that
that
we
we
can
can
listen
listen
for.
for
At
at
this
this
point,
point
let's
let's
start
start
building
building
the
the
service.
service
It
it
only
only
has
has
one
one
responsibility,
responsibility
and
and
that's
that's
to
to
pull
pull
data
data
from
from
Firebase
firebase
in
in
this
this
movies
movies
collection,
collection
which
which
It's
it's
just
just
a
a
simple
simple
collection
collection
with
with
some
some
data
data
about
about
each
each
movie.
movie
So
so
we
we
can
can
start
start
by
by
injecting
injecting
the
the
AngularFire
angularfire
database,
database
and
and
then
then
we'll
we'll
create
create
a
a
function
function
to
to
get
get
movies.
movies
The
the
first
first
argument
argument
is
is
the
the
batch
batch
size,
size
and
and
that's
that's
how
how
many
many
items
items
we
we
wanna
wanna
pull
pull
for
for
each
each
query.
query
The
the
last
last
key
key
argument
argument
is
is
optional,
optional
and
and
that
that
represents
represents
the
the
key
key
from
from
the
the
previous
previous
set
set
of
of
records
records
that
that
we
we
pulled.
pulled
Firebase
firebase
doesn't
doesn't
have
have
an
an
equivalent
equivalent
to
to
SQL's
sql's
offset
offset
clause,
clause
so
so
we
we
need
need
to
to
pass
pass
it
it
a
a
specific
specific
key
key
that
that
tells
tells
it
it
where
where
to
to
start
start
the
the
next
next
query.
query
So
so
if
if
we
we
get
get
the
the
last
last
key
key
as
as
an
an
argument,
argument
then
then
we'll
we'll
set
set
it
it
as
as
the
the
start
start
app
app
property
property
before
before
sending
sending
this
this
query
query
to
to
Firebase.
firebase
So
so
with
with
that
that
done,
done
now
now
we
we
can
can
start
start
building
building
the
the
component,
component
And
and
we'll
we'll
actually
actually
get
get
started
started
in
in
the
the
HTML
html
first.
first
We're
we're
going
going
to
to
loop
loop
over
over
the
the
movies
movies
just
just
like
like
any
any
other
other
observable
observable
by
by
passing
passing
it
it
the
the
async
async
pipe.
pipe
Then
then
underneath
underneath
that
that
loop,
loop
we'll
we'll
create
create
a
a
div
div
that
that
has
has
that
that
infinite
infinite
scroll
scroll
directive
directive
that
that
we
we
looked
looked
at
at
earlier.
earlier
The
the
main
main
thing
thing
to
to
look
look
at
at
here
here
is
is
the
the
infinite
infinite
scroll
scroll
throttle,
throttle
which
which
is
is
1,000
1,000
milliseconds
milliseconds
or
or
one
one
second.
second
Then
then
there's
there's
the
the
scrolled
scrolled
event,
event
which
which
will
will
emit
emit
when
when
the
the
user
user
scrolls
scrolls
down
down
on
on
the
the
page.
page
The
the
reason
reason
we
we
wanna
wanna
throttle
throttle
this
this
event
event
is
is
because
because
we'll
we'll
actually
actually
be
be
sending
sending
the
the
Firebase
firebase
query
query
when
when
this
this
event
event
goes
goes
off.
off
If
if
we
we
didn't
didn't
throttle
throttle
it,
it
it'd
it'd
be
be
sending
sending
the
the
same
same
redundant
redundant
query
query
to
to
Firebase
firebase
every
every
couple
couple
milliseconds,
milliseconds
switch
switch
wouldn't
wouldn't
be
be
good.
good
And
and
as
as
a
a
final
final
touch,
touch
we'll
we'll
add
add
a
a
loading
loading
spinner
spinner
when
when
there's
there's
still
still
data
data
left
left
to
to
be
be
loaded
loaded
and
and
a
a
notification
notification
message
message
once
once
we've
we've
reached
reached
the
the
end
end
of
of
the
the
database.
database
So
so
now
now
let's
let's
put
put
this
this
all
all
together
together
in
in
the
the
TypeScript.
typescript
We're
we're
going
going
to
to
need
need
the
the
movie
movie
service
service
as
as
well
well
as
as
a
a
behavior
behavior
subject
subject
and
and
the
the
lodash
lodash
library.
library
We're
we're
going
going
to
to
use
use
the
the
behavior
behavior
subject
subject
to
to
replace
replace
a
a
Firebase
firebase
list
list
observable.
observable
This
this
allows
allows
us
us
to
to
concatenate
concatenate
each
each
new
new
batch
batch
of
of
data
data
together
together
as
as
opposed
opposed
to
to
re
re
querying
querying
the
the
old
old
data
data
along
along
with
with
the
the
new
new
data
data
each
each
time.
time
The
the
next
next
variable
variable
we
we
set
set
is
is
the
the
batch,
batch
which
which
is
is
just
just
the
the
size
size
we
we
want
want
for
for
each
each
query.
query
Then
then
the
the
last
last
key
key
is
is
just
just
the
the
Firebase
firebase
push
push
key
key
to
to
offset
offset
the
the
next
next
query.
query
Then
then
finished
finished
is
is
a
a
boolean
boolean
that
that
will
will
tell
tell
us
us
whether
whether
or
or
not
not
the
the
database
database
has
has
any
any
data
data
left
left
in
in
it.
it
During
during
ng
ng
on
on
init,
init
we'll
we'll
load
load
the
the
initial
initial
data,
data
and
and
then
then
we
we
can
can
call
call
the
the
same
same
function
function
in
in
the
the
on
on
scroll
scroll
event
event
handler
handler
as
as
well.
well
The
the
purpose
purpose
of
of
GitMovies
gitmovies
is
is
to
to
query
query
data
data
and
and
then
then
concatenate
concatenate
it
it
to
to
the
the
existing
existing
behavior
behavior
subject.
subject
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
see
see
if
if
the
the
finished
finished
variable
variable
to
to
true.
true
And
and
if
if
so,
so
we'll
we'll
just
just
return
return
null.
null
Otherwise,
otherwise
we'll
we'll
try
try
to
to
make
make
a
a
query
query
to
to
the
the
database.
database
So
so
we'll
we'll
call
call
the
the
movie
movie
service
service
dot
dot
get
get
movies.
movies
Then
then
we
we
add
add
one
one
extra
extra
item
item
to
to
the
the
batch.
batch
And
and
the
the
reason
reason
for
for
this
this
is
is
we
we
need
need
that
that
extra
extra
item
item
teases
teases
the
the
key
key
for
for
any
any
anticipated
anticipated
upcoming
upcoming
queries.
queries
Then
then
we
we
can
can
use
use
the
the
do
do
operator
operator
to
to
run
run
some
some
arbitrary
arbitrary
code
code
whenever
whenever
this
this
observable
observable
is
is
subscribed
subscribed
to.
to
So
so
the
the
first
first
thing
thing
we'll
we'll
do
do
is
is
set
set
the
the
last
last
key
key
to
to
that
that
extra
extra
item
item
that
that
we
we
queried.
queried
And
and
then
then
once
once
that's
that's
set,
set
we
we
can
can
just
just
slice
slice
it
it
off
off
the
the
array
array
using
using
the
the
Lodash
lodash
slice
slice
operator.
operator
So
so
we
we
just
just
want
want
the
the
first
first
2
2
out
out
of
of
the
the
3
3
items
items
we
we
queried,
queried
so
so
we
we
pass
pass
it
it
the
the
array
array
with
with
0
0
as
as
the
the
starting
starting
index
index
and
and
then
then
the
the
batch
batch
size
size
is
is
the
the
ending
ending
index.
index
The
the
cool
cool
thing
thing
about
about
behavior
behavior
subjects
subjects
is
is
you
you
can
can
just
just
call
call
get
get
value
value
to
to
get
get
whatever
whatever
value
value
is
is
currently
currently
in
in
that
that
subject.
subject
So
so
we'll
we'll
set
set
that
that
to
to
the
the
current
current
movies
movies
variable,
variable
Then
then
we'll
we'll
see
see
if
if
the
the
last
last
key
key
in
in
each
each
of
of
these
these
two
two
arrays
arrays
is
is
identical.
identical
And
and
if
if
so,
so
we'll
we'll
know
know
we've
we've
reached
reached
the
the
end
end
of
of
the
the
database,
database
and
and
we
we
can
can
just
just
flag
flag
that
that
finished
finished
variable
variable
as
as
true.
true
And
and
the
the
final
final
step
step
is
is
to
to
just
just
update
update
the
the
value
value
of
of
the
the
behavior
behavior
subject
subject
itself,
itself
and
and
we
we
do
do
that
that
by
by
concatenating
concatenating
the
the
current
current
movies
movies
to
to
the
the
new
new
movies
movies
that
that
we
we
just
just
queried.
queried
And
and
finally,
finally
to
to
execute
execute
this
this
code,
code
we
we
call
call
take
take
1
1
because
because
we
we
only
only
need
need
to
to
run
run
this
this
once
once
and
and
then
then
call
call
subscribe.
subscribe
Now
now
if
if
we
we
go
go
back
back
to
to
the
the
app
app
we
we
can
can
see
see
that
that
whenever
whenever
we
we
scroll
scroll
down
down
the
the
scrolled
scrolled
event
event
fires
fires
in
in
the
the
console
console
and
and
it
it
also
also
loads
loads
the
the
new
new
movies
movies
from
from
Firebase.
firebase
When
when
there's
there's
no
no
more
more
data
data
to
to
load,
load
it
it
stops
stops
showing
showing
the
the
loading
loading
spinner
spinner
and
and
instead
instead
shows
shows
that
that
message
message
that
that
we've
we've
reached
reached
the
the
end.
end
That's
that's
it
it
for
for
Angular
angular
4
4
and
and
Firebase.
firebase
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
want
want
support
support
building
building
your
your
own
own
Angular
angular
project,
project
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
In this video, the speaker explains how Infinite Scroll allows for query data on the fly based on a user's scroll position, which is better for developers. They then proceed to build an infinite scroll feature in Angular 4 using Mmx infinite scroll, which allows for listening to and responding to a scroll event. They also discuss the movie service and behavior subject, which allows for updating the value of the behavior subject and adding a loading spinner when there is no more data to load. Finally, they discuss updating the value of the behavior subject and thank the audience for watching.
Infinite Scroll with Angular and Firebase
Infinite Scroll allows you to query data on the fly based on a user's scroll position, which is generally a better user experience than traditional pagination, and it's also easier for you as a developer to implement. In this episode, we're going to build an infinite scroll feature in Angular 4 using Firebase on the back end. To speed up the development process, we're going to use a package called n g x infinite scroll. This will allow us to listen to as well as to throttle the scroll event, which is very useful when making our queries to Firebase. You can install it by running npm install n g x infinite scroll. And you can include it in your app module or whichever module is using it. The module itself exports a directive which we can use in the HTML. We'll get into this more later, but basically it listens for the scroll event on the window and then sends a scroll event that we can listen for. At this point, let's start building the service. It only has one responsibility, and that's to pull data from Firebase in this movies collection, which It's just a simple collection with some data about each movie. So we can start by injecting the AngularFire database, and then we'll create a function to get movies. The first argument is the batch size, and that's how many items we wanna pull for each query. The last key argument is optional, and that represents the key from the previous set of records that we pulled. Firebase doesn't have an equivalent to SQL's offset clause, so we need to pass it a specific key that tells it where to start the next query. So if we get the last key as an argument, then we'll set it as the start app property before sending this query to Firebase. So with that done, now we can start building the component, And we'll actually get started in the HTML first. We're going to loop over the movies just like any other observable by passing it the async pipe. Then underneath that loop, we'll create a div that has that infinite scroll directive that we looked at earlier. The main thing to look at here is the infinite scroll throttle, which is 1,000 milliseconds or one second. Then there's the scrolled event, which will emit when the user scrolls down on the page. The reason we wanna throttle this event is because we'll actually be sending the Firebase query when this event goes off. If we didn't throttle it, it'd be sending the same redundant query to Firebase every couple milliseconds, switch wouldn't be good. And as a final touch, we'll add a loading spinner when there's still data left to be loaded and a notification message once we've reached the end of the database. So now let's put this all together in the TypeScript. We're going to need the movie service as well as a behavior subject and the lodash library. We're going to use the behavior subject to replace a Firebase list observable. This allows us to concatenate each new batch of data together as opposed to re querying the old data along with the new data each time. The next variable we set is the batch, which is just the size we want for each query. Then the last key is just the Firebase push key to offset the next query. Then finished is a boolean that will tell us whether or not the database has any data left in it. During ng on init, we'll load the initial data, and then we can call the same function in the on scroll event handler as well. The purpose of GitMovies is to query data and then concatenate it to the existing behavior subject. The first thing we'll do is see if the finished variable to true. And if so, we'll just return null. Otherwise, we'll try to make a query to the database. So we'll call the movie service dot get movies. Then we add one extra item to the batch. And the reason for this is we need that extra item teases the key for any anticipated upcoming queries. Then we can use the do operator to run some arbitrary code whenever this observable is subscribed to. So the first thing we'll do is set the last key to that extra item that we queried. And then once that's set, we can just slice it off the array using the Lodash slice operator. So we just want the first 2 out of the 3 items we queried, so we pass it the array with 0 as the starting index and then the batch size is the ending index. The cool thing about behavior subjects is you can just call get value to get whatever value is currently in that subject. So we'll set that to the current movies variable, Then we'll see if the last key in each of these two arrays is identical. And if so, we'll know we've reached the end of the database, and we can just flag that finished variable as true. And the final step is to just update the value of the behavior subject itself, and we do that by concatenating the current movies to the new movies that we just queried. And finally, to execute this code, we call take 1 because we only need to run this once and then call subscribe. Now if we go back to the app we can see that whenever we scroll down the scrolled event fires in the console and it also loads the new movies from Firebase. When there's no more data to load, it stops showing the loading spinner and instead shows that message that we've reached the end. That's it for Angular 4 and Firebase. If this video helped you, please like and subscribe. And if you want support building your own Angular project, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you soon.
In this video, the speaker explains how Infinite Scroll allows for query data on the fly based on a user's scroll position, which is better for developers. They then proceed to build an infinite scroll feature in Angular 4 using Mmx infinite scroll, which allows for listening to and responding to a scroll event. They also discuss the movie service and behavior subject, which allows for updating the value of the behavior subject and adding a loading spinner when there is no more data to load. Finally, they discuss updating the value of the behavior subject and thank the audience for watching.