Angular. Показать spinner во время навигации

Имеется индикатор загрузки

<div class="spinner" *ngIf="loading"></div>
import {
  Router,
  // import as RouterEvent to avoid confusion with the DOM Event
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router'

@Component({})
export class AppComponent {
  public loading = false;

  constructor(router: Router) {
    router.events.subscribe((event: RouterEvent) => {
      switch (true) {
        case event instanceof NavigationStart: {
          this.loading = true;
          break;
        }
        case event instanceof NavigationEnd:
        case event instanceof NavigationCancel:
        case event instanceof NavigationError: {
          this.loading = false;
          break;
        }
        default: {
          break;
        }
      }
    });
  }
}

Представленный код подходит для резолвера


Похожие записи

Angular environment variables

Создание и использования переменных окружения в Angular с использованием CLI >= 6 версии.

08 января 2019 г. в Angular

Upload файла в Angular по клику кнопки

Создано простейшее nestjs приложение, принимающее файлы. Выбор и отправка файла по клику подразумевает, что на форме отсутствует input для файла. Отправка запроса осуществляется с отслеживанием прогресса.

Angular & MVVM

  • Model - just file like user.class.ts
  • View - HTML template of component
  • ViewModel - Typescript part of a component