Как добавить загрузчик в мат-таблицу в angular

Я предполагаю, что вы хотите добавить счетчик во время извлечения данных из API.

Поскольку вы используете Material, я бы предложил использовать индикатор прогресса.

1. Вам следует импортировать модуль

импортируйте {MatProgressSpinnerModule} из @angular/material/progress-spinner;

2. затем добавьте его в ту часть вашего HTML, где вам нужен счетчик

источник: https://material.angular.io/comComponents/progress-spinner/overview

Это ты можешь попробовать

HTML

<table
  mat-table
  [dataSource] = "dataSource"
  matSort
  class = "table table-responsive"
  *ngIf = "!isLoading"
>
  <ng-container matColumnDef = "column1">
    <th mat-header-cell *matHeaderCellDef>Column 1</th>
    <td mat-cell *matCellDef = "let element">{{element.column1}}</td>
  </ng-container>

  <ng-container matColumnDef = "column2">
    <th mat-header-cell *matHeaderCellDef>Column 2</th>
    <td mat-cell *matCellDef = "let element">{{element.column2}}</td>
  </ng-container>

  <ng-container matColumnDef = "column3">
    <th mat-header-cell *matHeaderCellDef>Column 3</th>
    <td mat-cell *matCellDef = "let element">{{element.column3}}</td>
  </ng-container>

  <ng-container matColumnDef = "symbol">
    <th mat-header-cell *matHeaderCellDef>Column 3</th>
    <td mat-cell *matCellDef = "let element">{{element.symbol}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef = "displayedColumns"></tr>
  <tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>
  <tr class = "mat-row" *matNoDataRow>
    <td class = "mat-cell" [attr.colspan] = "displayedColumns.length">
      No data to display.
    </td>
  </tr>
</table>

<mat-card
  *ngIf = "isLoading"
  style = "display: flex; justify-content: center; align-items: center"
>
  <mat-progress-spinner color = "primary" mode = "indeterminate">
  </mat-progress-spinner>
</mat-card>

ТС

dataSource: any;

  isLoading = true;

  ngOnInit() {
    this.someService.getData()
      .subscribe(
        (data) => {
          console.info('data', data);
          this.isLoading = false;
          this.dataSource = data;
        },
        (error) => (this.isLoading = false)
      );
  }

Живая демонстрация

Я бы ничего не предполагал, поскольку контекст загрузчика не ясен. сначала вам придется изменить your.ts file. Хотя вам придется изменить тип данных «любой» на желаемый тип.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of, catchError, map, startWith } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  data$: Observable<any[]> = of([]);
  loading$: Observable<boolean> = of(true);

  displayedColumns: string[] = ['column1', 'column2', 'column3'];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.data$ = this.http.get<any[]>('your-api-endpoint').pipe(
      map(data => {
        this.loading$ = of(false);
        return data;
      }),
      startWith([]), // Emits an empty array initially
      catchError(() => {
        this.loading$ = of(false);
        return of([]);
      })
    );
  }
}

Затем вам придется обновить свой html-файл с помощью этого.

    <table mat-table [dataSource] = "data$ | async" matSort class = "table table-responsive">
  <tr mat-header-row *matHeaderRowDef = "displayedColumns"></tr>
  <tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>

  <!-- Loader Row -->
  <tr *ngIf = "(loading$ | async)" class = "mat-row">
    <td class = "mat-cell" [attr.colspan] = "displayedColumns.length" class = "loading-cell">
      <mat-spinner></mat-spinner>
    </td>
  </tr>

  <!-- No Data Row -->
  <tr *ngIf = "!(loading$ | async) && (data$ | async)?.length === 0" class = "mat-row">
    <td class = "mat-cell" [attr.colspan] = "displayedColumns.length">
      No data to display.
    </td>
  </tr>
</table>

Вы можете использовать этот код в качестве альтернативы для размещения счетчика в таблице.

</td>
<td class = "mat-cell" [attr.colspan] = "displayedColumns.length" *ngIf = "isLoading">
<mat-spinner diameter = "50"></mat-spinner>
</td>
</tr>

// это дополнительная опция, если вы хотите стилизовать контейнер с помощью CSS

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}