Как в angular 8 показать spinner загрузки?

Для отображения спиннера загрузки в Angular 8 можно использовать различные подходы. Вот несколько возможных способов:

1. Использование флага загрузки: Создайте переменную isLoading в компоненте, которая будет отвечать за состояние загрузки данных. При начале загрузки установите значение isLoading в true, а по завершении загрузки установите его в false. В шаблоне компонента можно использовать директиву *ngIf, чтобы показать или скрыть спиннер, в зависимости от значения isLoading.

Код в компоненте:

isLoading: boolean = false;

loadData() {
  this.isLoading = true;

  // Ваш код для загрузки данных

  this.isLoading = false;
}

Код в шаблоне:

<div *ngIf="isLoading">
  <!-- Показать спиннер -->
</div>

2. Использование http интерцептора: Создайте http interceptor, который будет отслеживать каждый http запрос, и менять состояние флага загрузки. При начале запроса установите флаг в true, а по завершении запроса установите его в false. В компонентах можно использовать этот флаг для отображения спиннера загрузки.

Код в интерцепторе:

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {

  constructor(private loadingService: LoadingService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.loadingService.setLoading(true);

    return next.handle(req).pipe(
      finalize(() => {
        this.loadingService.setLoading(false);
      })
    );
  }
}

Код в сервисе для установки флага загрузки:

@Injectable()
export class LoadingService {
  private isLoadingSubject = new BehaviorSubject<boolean>(false);
  public isLoading$: Observable<boolean> = this.isLoadingSubject.asObservable();

  setLoading(isLoading: boolean): void {
    this.isLoadingSubject.next(isLoading);
  }
}

Код в компоненте:

isLoading$: Observable<boolean>;

constructor(private loadingService: LoadingService) {}

ngOnInit() {
  this.isLoading$ = this.loadingService.isLoading$;
}

Код в шаблоне:

<div *ngIf="isLoading$ | async">
  <!-- Показать спиннер -->
</div>

3. Использование сторонней библиотеки: В Angular есть множество сторонних библиотек, которые предоставляют уже готовые компоненты для отображения спиннера загрузки. Вы можете установить и использовать одну из таких библиотек, например ngx-spinner, ng4-loading-spinner или ng-spin-kit, которые предлагают гибкую настройку и различные стили спиннеров.

Установка библиотеки ngx-spinner:

npm install ngx-spinner --save

Код в компоненте:

import { NgxSpinnerService } from 'ngx-spinner';

constructor(private spinner: NgxSpinnerService) {}

loadData() {
  this.spinner.show();

  // Ваш код для загрузки данных

  this.spinner.hide();
}

Код в шаблоне:

<ngx-spinner [bdColor]="'rgba(51,51,51,0.8)'" [color]="'#fff'" [size]="'medium'" [type]="'line-scale-pulse-out-rapid'"></ngx-spinner>

Это не исчерпывающий список методов для отображения спиннера загрузки в Angular 8. Выберите подходящий вариант в зависимости от требований вашего проекта и предпочтений разработчиков.