Home > Web Front-end > CSS Tutorial > How to Implement a Loading Screen During Route Transitions in Angular?

How to Implement a Loading Screen During Route Transitions in Angular?

Patricia Arquette
Release: 2024-12-07 14:57:12
Original
658 people have browsed it

How to Implement a Loading Screen During Route Transitions in Angular?

Displaying a Loading Screen During Route Transitions in Angular 2

Angular Router offers Navigation Events that enable you to monitor changes and modify the UI accordingly. These events include NavigationStart, NavigationEnd, NavigationCancel, and NavigationError.

Using Navigation Events

To display a loading screen during route changes, you can subscribe to these Navigation Events within your root component (typically app.component.ts) and toggle the loading UI based on the specific event triggered.

First, import the necessary event related classes from the @angular/router and define a boolean flag, loading, within your root component.

import {
  Router,
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router'

@Component({})
export class AppComponent {
  loading = true; // Initializing to true to show loading spinner on first load
  constructor(private router: Router) {
    this.router.events.subscribe((e : RouterEvent) => {
       this.navigationInterceptor(e);
     })
  }
}
Copy after login

Within the navigationInterceptor method, you can listen for the NavigationStart, NavigationEnd, NavigationCancel, and NavigationError events and toggle the loading flag based on each event.

  // Shows and hides the loading spinner during RouterEvent changes
  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.loading = true;
    }
    if (event instanceof NavigationEnd) {
      this.loading = false;
    }
    if (event instanceof NavigationCancel) {
      this.loading = false;
    }
    if (event instanceof NavigationError) {
      this.loading = false;
    }
  }
Copy after login

Within your root template, you can then use conditional rendering to display the loading overlay based on the loading flag's state.

<div>
Copy after login

By following this approach, you can effectively display a loading screen during route transitions in your Angular 2 application.

Performance Optimization

If performance is a concern, you can leverage NgZone and Renderer to enhance the loading spinner's performance, as shown in the updated code snippet below:

private _navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.ngZone.runOutsideAngular(() => {
        this.renderer.setElementStyle(
          this.spinnerElement.nativeElement,
          'opacity',
          '1'
        )
      })
    }
    if (event instanceof NavigationEnd) {
      this._hideSpinner()
    }
    // Set loading state to false in both of the below events to
    // hide the spinner in case a request fails
    if (event instanceof NavigationCancel) {
      this._hideSpinner()
    }
    if (event instanceof NavigationError) {
      this._hideSpinner()
    }
  }

  private _hideSpinner(): void {
    this.ngZone.runOutsideAngular(() => {
      this.renderer.setElementStyle(
        this.spinnerElement.nativeElement,
        'opacity',
        '0'
      )
    })
  }
Copy after login

This technique bypasses Angular's change detection mechanism when updating the spinner's opacity, resulting in smoother transitions.

The above is the detailed content of How to Implement a Loading Screen During Route Transitions in Angular?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template