upstream-tanstack-query/docs/framework/angular/guides/background-fetching-indicators.md

id, title, ref, replace

id	title	ref	replace
background-fetching-indicators	Background Fetching Indicators	docs/framework/react/guides/background-fetching-indicators.md	useIsFetching hook @tanstack/react-query injectIsFetching function @tanstack/angular-query-experimental

@Component({
  selector: 'todos',
  template: `
    @if (todosQuery.isPending()) {
      Loading...
    } @else if (todosQuery.isError()) {
      An error has occurred: {{ todosQuery.error().message }}
    } @else if (todosQuery.isSuccess()) {
      @if (todosQuery.isFetching()) {
        Refreshing...
      }
      @for (todos of todosQuery.data(); track todo.id) {
        <todo [todo]="todo" />
      }
    }
  `,
})
class TodosComponent {
  readonly todosQuery = injectQuery(() => ({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  }))
}

import { injectIsFetching } from '@tanstack/angular-query-experimental'

@Component({
  selector: 'global-loading-indicator',
  template: `
    @if (isFetching()) {
      <div>Queries are fetching in the background...</div>
    }
  `,
})
export class GlobalLoadingIndicatorComponent {
  readonly isFetching = injectIsFetching()
}