Displaying a Loading Status for Angular Lazy-Loaded Routes

When building web applications with Angular, lazy loading is a great way to improve performance and reduce the initial bundle size. With lazy loading, routes are loaded only when they are needed, which can make your application faster and more efficient. However, when loading a lazy-loaded route, it can be helpful to display a loading status to the user. In this article, we will show you how to display a loading status for Angular lazy-loaded routes.

Why Display a Loading Status?

When a user navigates to a lazy-loaded route, there can be a delay before the route is fully loaded and the content is displayed. This delay can be caused by a number of factors, such as the size of the route module, the speed of the user's internet connection, or the performance of the user's device. During this delay, it can be helpful to display a loading status to the user. This can let the user know that the application is working and that the content will be displayed soon. It can also help to improve the user experience by providing feedback and reducing uncertainty.

How to Display a Loading Status

To display a loading status for Angular lazy-loaded routes, you can use the following steps:

1. Create a loading component
2. Add a router event listener
3. Display the loading component when the route is loading

Step 1: Create a Loading Component

The first step is to create a loading component. This component will be responsible for displaying the loading status to the user. To create a loading component, you can use the Angular CLI to generate a new component. For example:

ng generate component loading

This will generate a new loading component with the following files:

• loading.component.ts: The TypeScript file for the loading component
• loading.component.html: The HTML file for the loading component
• loading.component.css: The CSS file for the loading component

In the HTML file, you can add the content that you want to display when the route is loading. For example:

<p>Loading...</p>

Step 2: Add a Router Event Listener

The next step is to add a router event listener. This listener will be responsible for detecting when the route is loading and when it has finished loading. To add a router event listener, you can use the following code:

import { Router, NavigationStart, NavigationEnd } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe((event) => {
    if (event instanceof NavigationStart) {
      // Display the loading component
    }
    if (event instanceof NavigationEnd) {
      // Hide the loading component
    }
  });
}

In this code, we are using the Router service to subscribe to router events. We are using the NavigationStart and NavigationEnd events to detect when the route is loading and when it has finished loading. When the NavigationStart event is fired, we can display the loading component. When the NavigationEnd event is fired, we can hide the loading component.

Step 3: Display the Loading Component

The final step is to display the loading component when the route is loading. To do this, you can use the Angular router outlet. The router outlet is a component that is responsible for displaying the current route. You can use the router outlet to display the loading component when the route is loading and the current route component when the route has finished loading. To do this, you can use the following code:

<router-outlet>
  <app-loading *ngIf="loading"></app-loading>
</router-outlet>

In this code, we are using the *ngIf directive to conditionally display the loading component. When the loading variable is true, the loading component is displayed. When the loading variable is false, the current route component is displayed. We can set the loading variable to true when the NavigationStart event is fired and to false when the NavigationEnd event is fired.

In this article, we have shown you how to display a loading status for Angular lazy-loaded routes. By displaying a loading status, you can improve the user experience and provide feedback to the user. To display a loading status, you can create a loading component, add a router event listener, and display the loading component when the route is loading. With these steps, you can easily display a loading status for Angular lazy-loaded routes.

References