Build Angular Infinite Scroll Component to Fetch Data on Scroll Using ngx-infinite-scroll in TS
1K views
Jun 9, 2025
Get the full source code of the application here: Official Website: https://freemediatools.com
View Video Transcript
0:02
uh hello guys uh welcome to this video
0:04
so in this video I will show you a
0:06
angular package which allows you to
0:08
display infinite scrolling kind of
0:12
functionality if you're fetching some
0:14
data from an API or any sort of third
0:17
party source and if you want to display
0:19
that data infinitely whenever the user
0:22
scrolls you need to load some dynamic
0:25
data so let me show you example right
0:28
here so you can see as we are scrolling
0:30
downwards uh the dynamic data is coming
0:33
so this is repeating endless number of
0:36
times so if you have a large amount of
0:38
data that you want to display so in
0:41
efficient manner because you don't want
0:43
to display all that data once because
0:46
this will increase the load on the
0:48
server so what you can do as the user
0:50
scrolls down you can fetch dynamic data
0:54
so that's exactly what we are doing so
0:56
as the user is scrolling down some more
0:58
data is coming right
1:00
here so this you can implement this
1:03
infinite data scroll so there is a
1:05
package for this that you can install
1:07
which is ngx infinite scroll so if you
1:10
go to npmjs.com just search for this
1:13
package which is
1:14
ngx infinite
1:17
scroll so if you just search for this
1:20
package this will be the package here
1:23
the command is very simple npmi ngx
1:27
infinite scroll it is very popular
1:30
package almost
1:32
276,000 weekly downloads so I will show
1:36
you a very simple example like this so
1:40
the very first thing we need to do we
1:42
need to go to this uh app domodule.ts
1:45
file of this angular project and we need
1:48
to register this module first of all so
1:50
right
1:51
here you simply write the import line
1:54
and uh inside curly brackets you simply
1:57
register it so we simply say
1:59
infinite scroll module and it will be
2:03
coming from this package which is
2:06
ngx
2:08
infinite
2:10
scroll and then you go to the imports
2:13
array right here and then you
2:17
simply type this infinite scroll module
2:21
so this is the registration part so this
2:24
is important now close this file come to
2:26
the app.component component html file so
2:29
right here
2:30
you have your div wherever you need to
2:34
render it so I will simply give it a
2:37
class of search
2:41
results so it can be any sort of data
2:44
that you want to
2:45
display so and then you need to attach
2:48
some attributes so one such attribute is
2:51
the infinite scroll
2:56
the next attribute is required is
2:59
this option here infinite scroll
3:05
distance and this will be equal to a
3:08
function scroll
3:11
distance how much
3:14
distance whenever the user scrolls down
3:16
how much distance is required so in the
3:18
TypeScript code you will simply have
3:21
this variable defined here scroll
3:23
distance is equal to one so you can
3:26
change this
3:27
accordingly you can play with this and
3:29
then the second option is the speed
3:33
infinite scroll up
3:36
distance so this is also variable you
3:39
can change this this is the second
3:44
option the third option is the
3:48
throttle this is again a numeric value
3:50
you can control it accordingly and then
3:53
we have two call back
3:55
functions scrolled and scrolled up as
3:59
the user scrolls down and scrolls up
4:02
these two functions will
4:04
execute on scroll down and on up and
4:08
here you will fetch your data so
4:10
whatever data that you want to display
4:12
in my case I'm just displaying a random
4:15
set of
4:17
names so you can display this from an
4:20
API
4:21
so we are simply using ng4 and here we
4:24
are looping through the array and uh
4:28
just rendering this
4:31
I so as we scroll down you will see a
4:34
next bunch of items will display as we
4:37
scroll down you can see it is loading
4:39
bunch of items so this is a very
4:41
efficient way of displaying large sets
4:43
of data without uh loading your server
4:47
so this is very efficient and now let me
4:50
show you the TypeScript code which is
4:52
responsible so these two call back
4:54
functions which are on scroll down and
4:56
on
4:57
up
4:59
so inside this as we as we scroll down
5:03
you will see in the console as we scroll
5:06
down this call back function will hit so
5:10
it will display this message scroll down
5:13
and inside this we are loading the data
5:15
that we want to display
5:17
so we are basically getting the next 20
5:20
items and appending it to the array and
5:23
direction we come to down similarly if
5:27
you move the mouse upwards the scroll up
5:30
event will fire and again we will fetch
5:33
the next 20 items and display this so
5:35
the this you can change the logic here
5:38
how you want to display this it's
5:40
totally up to you but this is a great
5:42
module in Angular that you can integrate
5:45
simply install it first of all then go
5:47
to register it and it's very easy to
5:50
implement so in the real life scenario
5:53
you will be fetching data from an API or
5:55
database but uh I just show you show
5:58
showed you the very simple example how
6:00
to get started inside this package in in
6:03
Angular so thank you very much for
6:06
watching this video and also check out
6:08
my website freemediattools.com
6:10
uh which contains unlimited number of
6:12
tools regarding audio video and image
6:15
and I will be seeing you in the next
6:17
live stream