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

How to Display a Loading Screen While Routing in Angular 2

Displaying a loading screen during transitions between routes enhances the user experience by providing visual feedback. Angular 2 offers built-in support for managing such transitions.

The key to implementing a loading screen is to subscribe to Angular's RouterEvents. These events provide information about the current state of the navigation process.

Improved Answer for Enhanced Performance

For better performance, consider avoiding ngIf for conditional display of the loading spinner. Instead, leverage NgZone and Renderer to toggle the spinner's visibility outside Angular's change detection cycle.

@Component({})
export class AppComponent {

  @ViewChild('spinnerElement') spinnerElement: ElementRef

  constructor(private router: Router,
              private ngZone: NgZone,
              private renderer: Renderer) {
    router.events.subscribe(this._navigationInterceptor)
  }

  private _navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      // Show spinner outside Angular's zone to prevent change detection
      this.ngZone.runOutsideAngular(() => {
        this.renderer.setElementStyle(
          this.spinnerElement.nativeElement,
          'opacity',
          '1'
        )
      })
    }

    if (event instanceof NavigationEnd) {
      this._hideSpinner()
    }
    // Hide spinner in case of failure
    if (event instanceof NavigationCancel || event instanceof NavigationError) {
      this._hideSpinner()
    }
  }

  private _hideSpinner(): void {
    // Hide spinner outside Angular's zone to prevent change detection
    this.ngZone.runOutsideAngular(() => {
      this.renderer.setElementStyle(
        this.spinnerElement.nativeElement,
        'opacity',
        '0'
      )
    })
  }
}

HTML

<div class="loading-overlay" #spinnerElement>

By subscribing to RouterEvents and conditionally displaying the loading spinner outside change detection, you can achieve a smoother and more responsive navigation experience.

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