Up next in 10
Angular ngx-loading-bar Example to Show Loading Progressbars on Fetching Data From API in Browser
1 views
Jun 13, 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 how to
0:06
show a loading progress bar uh while
0:09
fetching data from an API or database
0:12
inside your angular application so we
0:14
have a simple example right here if I
0:16
click this button of load users as soon
0:19
as I click this button you will see a
0:21
bunch of data will be fetched before
0:23
that we will show this nice little
0:25
spinner progress bar that you see right
0:28
here
0:29
so you can do this with any kind of data
0:32
which is coming from an API you can show
0:34
this spinner loading progress bar and
0:37
then you can fetch the data and display
0:39
it so actu uh this is actually the
0:42
package that we are using here which is
0:44
ngx loading bar
0:47
so if you just go to npmjs just type
0:51
this ngx loading bar
0:55
so this is the actual package name the
0:58
command is simple you install this
1:00
package by executing this command npm
1:02
ngx loading bar and it's a fairly new
1:05
package 139 downloads so this is the
1:10
full example let me start from scratch
1:12
the very first thing we need to do here
1:14
we need to actually go to the app
1:16
domodule.ts file of your angular project
1:20
and simply register this module so for
1:22
registering it we simply say we require
1:25
it
1:26
ngx loading bar and then we go to the
1:29
imports array and we simply add all this
1:33
after the next step is that we simply go
1:35
to the app.component html file and
1:38
wherever we need to uh show the progress
1:42
bar this is the actual component here
1:45
ngx loading bar opening and closing tab
1:49
and now you will see your progress bar
1:51
will show so this is the actual
1:54
component ngx loading bar
1:58
and after that you can actually
2:01
display any sort of data that you want
2:03
to display so in this case we are uh
2:05
having a simple button so as soon as I
2:08
click this button we are executing this
2:09
function load users and we are showing
2:12
the users using ng4 directive looping
2:15
through all the users and displaying
2:17
their names as soon as I click the
2:19
button right here you will see all the
2:20
data will be displayed but before that
2:22
you will see this progress bar will show
2:25
right here and then the data will show
2:28
and now we just need to define this
2:29
function load users in the TypeScript
2:31
file here app.component or typescript
2:34
file so now you will see we are fetching
2:36
this data we have declared this users to
2:38
an empty array and we are passing this
2:41
service loading bar service to this
2:44
constructor
2:45
at the top here you will see add the
2:48
rate ngx loading bar
2:51
so the package name is uh add the rate
2:54
also this
2:57
you just need to add add the rate ngx
3:00
loading bar this is the package
3:04
add the rate ngx loading bar this is the
3:07
name of the package and you can just see
3:10
it has various extensions as well this
3:14
is the core module you install this it's
3:17
almost having 42,000 weekly downloads so
3:20
it has various extensions right here you
3:23
can see this is the core module this is
3:25
also have router HTTP client so
3:28
automatic page progress bar for angular
3:33
so
3:35
in this easy way you can integrate it
3:37
inside your angular application so in
3:39
this load users function we are simply
3:42
fetching the data from JSON placeholder
3:44
API and then we are displaying this data
3:49
and
3:50
now for showing the progress bar we are
3:53
using this service and calling the start
3:55
method so as soon as I click the button
3:57
you will see it will first of all show
3:59
the progress bar and then the data will
4:01
be displayed inside the browser so in
4:03
this easy way you can use this custom
4:05
loading progress bar component
4:07
specifically designed for angular
4:09
applications and you can use this to
4:12
display data from an HTTP API or any
4:16
sort of database also check out my
4:19
website freemediatools.com
4:21
uh which contains thousands of tools
4:24
related to audio video and image and I
4:27
will be seeing you in the next live
4:30
stream