How Can I Display a Loading Screen During Route Changes in Angular 2?

Displaying a Loading Screen During Route Changes in Angular 2

In Angular 2, navigating between routes can trigger the display of a loading screen, providing a visual indication that the application is transitioning.

Using Navigation Events

The Angular Router offers Navigation Events that track the progress of route changes. By subscribing to these events, you can manipulate the UI accordingly, including showing a loading screen. Here's how:

app.component.ts (Root Component)

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

@Component({/* ... */})
export class AppComponent {

  // Initialize loading indicator
  loading = true;

  constructor(private router: Router) {
    router.events.subscribe((e: RouterEvent) => this.navigationInterceptor(e));
  }

  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.loading = true;
    }
    if (event instanceof NavigationEnd) {
      this.loading = false;
    }
    if (event instanceof NavigationCancel || event instanceof NavigationError) {
      this.loading = false;
    }
  }
}

app.component.html (Root View)

<div class="loading-overlay" *ngIf="loading">
  <!-- Show loading animation, e.g., spinner -->
</div>

Performance Enhancement

For improved performance, leverage Angular's NgZone and Renderer to control the loading screen visibility. This bypasses change detection, resulting in smoother animation transitions:

app.component.ts (Updated Root Component)

import { NgZone, Renderer, ElementRef, ViewChild } from '@angular/core';

@Component({/* ... */})
export class AppComponent {

  @ViewChild('spinnerElement')
  spinnerElement: ElementRef;

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

  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();
    }
    if (event instanceof NavigationCancel || event instanceof NavigationError) {
      this._hideSpinner();
    }
  }

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

app.component.html (Updated Root View)

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

By implementing these techniques, you can effectively manage the visibility of a loading screen during route navigation in Angular 2, enhancing the user experience with clear visual feedback.

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