Up next in 10
Build a Angular Infinite Scroll Component to Load Data in Modal Box Using ngx-infinite-scroll in TS
Jan 30, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/build-a-angular-infinite-scroll-component-to-load-data-in-modal-box-using-ngx-infinite-scroll-in-ts/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video I will show you a
0:04
angular package which allows you to do
0:06
infinite scrolling of data fetching if
0:09
you are fetching data from a remote
0:11
Source or API or data is very large then
0:14
you can use this infinite scroll
0:16
component inside angular there is a
0:18
package here so you can see the demo
0:20
right here as I'm scrolling downwards
0:23
the data is coming right here
0:26
remotely on infinite Scrolls so as I'm
0:29
scrolling you can even have a model
0:30
window as well so inside this model
0:33
window as I'm going downwards you will
0:36
see the data is coming right here and
0:38
remotely so this is actually the package
0:41
which is there inside angul the package
0:44
name is if you go to npmjs.com and just
0:47
search for this package which is
0:50
nx-
0:51
infinite scroll this is actually the
0:56
component and if you just see right here
0:59
this is the command there it's a very
1:02
simple command and it's almost having
1:06
230,000 weekly downloads so it's a
1:08
pretty popular package I have written a
1:10
simple blog post step by step where I
1:13
have given the example code you can
1:15
refer my blog post so the very first
1:18
thing we need to do we need to go to
1:19
this file here app. module. typescript
1:22
file and we need to register this module
1:25
so right here we need to add this file
1:28
add this line here which is the import
1:30
statement which is
1:34
infinite scroll module and it will be
1:38
coming from this package
1:40
ngx infinite scroll so in this way you
1:44
can add this module with using the
1:47
import statement so after adding this
1:49
import statement you will go to the
1:51
Imports array and then add this module
1:55
that you imported so now the next thing
1:58
we need to do we need to go to the app
2:00
component. HTML file to use this
2:02
component so let me delete this and
2:06
start from scratch so right here you
2:09
will have your
2:11
button so this button will be
2:13
responsible for fetching the data so
2:16
we'll be declaring this button so you
2:19
will see this button appearing toggle
2:21
model and as soon as you click this
2:23
button a model window will
2:26
open so for showing that model window we
2:29
do need to write some code for this so
2:31
we'll be opening the model tag and we'll
2:34
putting this NG if condition that if
2:37
model open is true then just show the
2:42
model window and for
2:44
this we will initialize this function
2:47
right
2:49
here so you're putting this NG if
2:51
directive so if you click this button
2:55
this will make this property to true and
2:58
then the model window will show so if I
3:01
click this now you will see the model
3:02
window now opens and we are fetching the
3:05
data right here as we are scrolling
3:08
downwards the data is
3:11
coming
3:13
so we have defined this function togle
3:16
model inside our typescript code if you
3:19
go to
3:21
this you'll see we have just 100 items
3:25
right here as we scroll downwards these
3:28
100 items are increased
3:30
this is as we scroll downwards this is
3:33
essentially this package right here
3:36
and this data can be coming from your
3:38
database or it can be coming from an API
3:41
as well
3:42
so so this is our model component if you
3:46
see as we are scrolling
3:49
downwards we are loading this
3:52
data
3:54
so you can see that so we are updating
3:57
it so as you scroll down we
4:00
basically fetching more items and just
4:03
pushing it inside this array using this
4:05
for
4:06
Loop so the logic is very simple this is
4:10
actually the component which is
4:11
responsible for this if you this is your
4:15
model component if you
4:18
see so if you open this you will see
4:20
that so this is actually the
4:25
thing and uh you will see inside this
4:28
model window we are showing the current
4:31
time this is your title of the model
4:33
window and inside this whenever you
4:35
scroll downwards this function executes
4:38
on model scroll down and we are showing
4:41
the model body and the footer as well so
4:44
we also have the close Button as well if
4:46
you see so as I scrolling downwards the
4:48
data is coming and when you scroll
4:51
downwards this function executes which
4:53
is on model scroll down so we have
4:55
defined this function which
4:58
is so inside this we are getting more
5:04
data
5:06
so this is actually the package guys you
5:10
can find out get the full source code I
5:13
written a step by-step blog post on my
5:15
website you can check out and thank you
5:18
very much for watching this video uh
5:21
please hit that like button subscribe
5:23
the channel and also check out my
5:25
website as well free mediat tools.com
5:27
which contains thousands of tools
5:30
regarding audio video and image and I
5:32
will be seeing you guys in the next
5:34
video
#Software
#Development Tools
#Other