Angular 18 - Add Loading Indicator in Angular - NgxSpinner
Table of Contents
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.
- Open your terminal.
- Run the following command to create a new project:
ng new my-angular-app
- 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.
- In your terminal, run the following command:
npm install ngx-spinner --save
- 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.
- Open
app.module.ts
in your project. - Add the following import statement at the top:
import { NgxSpinnerModule } from "ngx-spinner";
- Include
NgxSpinnerModule
in theimports
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.
- Open the component HTML file where you want to display the loading indicator (e.g.,
app.component.html
). - Add the NgxSpinner element:
<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="medium" color="#fff" type="Ball-Tail" ></ngx-spinner>
- In the component TypeScript file (e.g.,
app.component.ts
), importNgxSpinnerService
: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
.
- Inject
NgxSpinnerService
in your component's constructor:constructor(private spinner: NgxSpinnerService) {}
- 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.
- 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!