Angular 18 - Add Loading Indicator in Angular - NgxSpinner

Introduction

This tutorial will guide you through adding a loading indicator to your Angular 18 application using the NgxSpinner package. A loading indicator enhances user experience by visually signaling that an operation is in progress. This can be particularly useful for asynchronous data loading.

Step 1: Set Up Your Angular Project

Before integrating NgxSpinner, ensure you have an Angular 18 project set up. If you don't have one, you can create a new project using the Angular CLI.

1. Open your terminal.
2. Run the following command to create a new project:

   ng new my-angular-app
   

3. Navigate to your project directory:

   cd my-angular-app
   

Step 2: Install NgxSpinner

To use NgxSpinner in your Angular application, you need to install the package.

1. In your terminal, run the following command:

   npm install ngx-spinner --save
   

2. This command will add NgxSpinner to your project dependencies.

Step 3: Import NgxSpinner Module

Next, you need to import the NgxSpinner module into your Angular application.

1. Open app.module.ts in your project.
2. Add the following import statement at the top:

   import { NgxSpinnerModule } from "ngx-spinner";
   

3. Include NgxSpinnerModule in the imports array of the @NgModule decorator:

   @NgModule({
     declarations: [...],
     imports: [
       ...,
       NgxSpinnerModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   

Step 4: Add NgxSpinner to Your Component

Now, you can add the spinner component to your desired component.

1. Open the component HTML file where you want to display the loading indicator (e.g., app.component.html).
2. Add the NgxSpinner element:

   <ngx-spinner
     bdColor="rgba(51, 51, 51, 0.8)"
     size="medium"
     color="#fff"
     type="Ball-Tail"
   ></ngx-spinner>
   

3. In the component TypeScript file (e.g., app.component.ts), import NgxSpinnerService:

   import { NgxSpinnerService } from "ngx-spinner";
   

Step 5: Control the Spinner in Your Component

To show and hide the spinner, you will need to call the show and hide methods from the NgxSpinnerService.

1. Inject NgxSpinnerService in your component's constructor:

   constructor(private spinner: NgxSpinnerService) {}
   

2. Use the following methods to control the spinner during data loading:

   loadData() {
     this.spinner.show();
     // Simulate a data load with a timeout
     setTimeout(() => {
       this.spinner.hide();
     }, 3000); // Adjust the duration as needed
   }
   

Step 6: Trigger Loading in Your Application

You can now trigger the loading indicator when performing async operations, such as fetching data from an API.

1. Call loadData() method in response to an event (e.g., button click):

   <button (click)="loadData()">Load Data</button>
   

Conclusion

You have successfully added a loading indicator to your Angular 18 application using NgxSpinner. This feature enhances user experience during data loading processes. For next steps, consider customizing the spinner's appearance by adjusting its properties or integrating it with actual API calls for dynamic data loading.

Happy coding!