How to add Progress/Loading bar in Angular using ngx-loading-bar ?

In this article you will learn how to integrate the loading bar or progress bar when going from one place to another in angular 17. It is very simple and easy to use. I am assuming that you have already installed node js and angular cli in your system. Let's get started

Step 1: Create a angular project by typing this command in terminal

      ng new Angular-app-name

Step 2: After that you have to install the npm packages for loading bar.

npm install @ngx-loading-bar/core @ngx-loading-bar/http-client --save

npm install @ngx-loading-bar/core @ngx-loading-bar/router --save

npm install @ngx-loading-bar/core --save

Step 3: Now if you want to show the loading bar in the full website then you have to import the module in app.component.ts file and if you want this loading bar module in a specific component import the module in that component. The importing will be the same. I am importing a full website. First I will import the module in the app component in the .ts file.

Step 4: Now add the loading bar html tag in app.component.html file 

<ngx-loading-bar color="#fff" height="5px"></ngx-loading-bar>

In this Html tag you will see color and height. you can adjust them as per your requirement . The color is for the loading bar and the height is the height from the top of the website. After applying all the code you have successfully integrated the loading bar in your angular project. You can now view the loading bar in your website by serving in the localhost. Type the below command to serve your project in your local machine.

ng serve 

If you have any query in this article you can contact from the contact page or mail me at the theinifiniteinsight1@gmail.com.