videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Angular ngx-scrollbar to Build Customized Scrollbars inside HTML Elements in Browser Using TS
Jan 26, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-ngx-scrollbar-to-build-customized-scrollbars-inside-html-elements-in-browser-using-typescript/
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 guys welcome to this video so
0:02
in this video I will show you how to
0:04
build out a customized scroll bar inside
0:07
angular application where you can show
0:10
your data and you can have a customized
0:13
scroll bar you can change this color
0:15
here that is appearing it's having this
0:17
blue color and we can easily change this
0:21
color you can customize it there's a
0:24
package here which allows you to do
0:28
this so we have actually binded this
0:31
color which is the blue color there is a
0:33
package here if you go to npmjs.com and
0:35
just search for this package ngx scroll
0:39
bar so this is actually the
0:43
package the command is simple I've
0:45
already installed it and it's almost
0:48
having 69,000 weekly
0:53
downloads
0:58
so I have written a complete step
1:00
by-step example on my website the link
1:02
is given in the description of this
1:04
video so you can check out the example
1:06
code so I will now delete everything and
1:08
start from scratch so what I will
1:14
do simp for the very first Ty you need
1:17
to do you need to go to this app.
1:20
module. typescript file and we need to
1:23
configure this module for configuring it
1:25
we need to add this import statement we
1:28
simply need to say scroll scroll bar
1:31
module we need to import this this will
1:33
be coming from this package ngx scroll
1:37
bar so you simply add this import
1:39
statement and then you go to the Imports
1:41
s where you import this so we simply
1:45
say scroll bar module so we simply add
1:49
this
1:53
line and then we simply
2:00
go to the template file so wherever you
2:03
need to display this scroll bar you put
2:07
the content here in the
2:09
div and we have this directive here
2:11
which is NG scroll bar we directly use
2:14
this
2:16
directive this is the name of the
2:18
directive here ng- scroll bar and here
2:22
inside this you will put the content
2:25
whichever content that you want to
2:27
display so we will have this simple diff
2:30
and we will just give it a padding of 1
2:34
em and I will attach this attribute
2:38
which is inner
2:40
HTML which will be the equal to the text
2:43
that we declared so now you will see
2:46
this text will be rendered out but we
2:49
haven't we are not seeing the scroll bar
2:51
to actually show the scroll bar we need
2:53
to attach a attribute to this element
2:56
which is the scroll element
3:01
and we also need to attach the thumbnail
3:05
class so this class which we have
3:08
configured inside the CSS code so if you
3:11
just attach this class you will
3:13
see and we just need to give it a height
3:16
to this element so that we can clearly
3:18
see the scroll bar so I will say height
3:21
is equal to 300
3:22
pixel and now if you see the scroll bar
3:25
is showing on the right hand side so
3:28
margin and and then the background
3:33
color so let me just give it
3:37
this e ff2 F3 this
3:41
is grayish background color so you also
3:44
see this nice little scroll bar you can
3:48
see
3:49
that so whatever you want to scroll you
3:54
surround this by this NG scroll bar
3:56
directive and you put everything what
3:58
you need to do and inside this attaching
4:01
these attributes height margin and the
4:03
background color and inside the CSS
4:06
property we'll see we are configuring
4:08
this background
4:10
color and you can change this to any
4:14
color you will see the scroll bar color
4:16
will change to using this module you can
4:20
have a customized scroll bar you can
4:23
change their background color you will
4:25
see that so
4:32
you can even basically control more
4:34
properties of it the height of the
4:37
scroll bar as well you can control it
4:40
each and every property
5:00
so this is actually the package guys you
5:03
conf we configure it and use this
5:06
directive NG scroll bar and you actually
5:09
see your you can have a customized
5:12
scroll bar inside your angular
5:14
application so this is actually the
5:16
module and they do offer a nice little
5:19
documentation on your website as well
5:21
you can check out their
5:22
examples NG scroll bar and you can see
5:26
that so it's specifically built for
5:28
angular applications
5:30
you can even have vertical scroll bar as
5:32
well horizontal as
5:36
well and it's a material design NG
5:40
scroll bar so you can see that this is
5:42
the horizontal one this is the vertical
5:45
one and you can change the look and feel
5:47
customize the appearance of scroll bar
5:50
so can check out this example
5:54
package and a step bystep blog post is
5:57
also given on my website you can get the
5:59
full source code that I used in this
6:01
video so the link is given in the
6:03
description so this is actually the
6:05
package ngx scroll bar and thank you
6:08
very much for watching this video and
6:09
also check out my website free mediat
6:11
tools.com uh which contains thousands of
6:14
tools regarding audio video and image
6:17
and I will be seeing you guys in the
6:19
next video