upstream-tanstack-query/docs/framework/angular/guides/disabling-queries.md

id, title, ref, replace

id	title	ref	replace
disabling-queries	Disabling/Pausing Queries	docs/framework/react/guides/disabling-queries.md	useQuery injectQuery

@Component({
  selector: 'todos',
  template: `<div>
    <button (click)="todosQuery.refetch()">Fetch Todos</button>

    @if (todosQuery.data()) {
      <ul>
        @for (todo of todosQuery.data(); track todo.id) {
          <li>{{ todo.title }}</li>
        }
      </ul>
    } @else {
      @if (todosQuery.isError()) {
        <span>Error: {{ todosQuery.error().message }}</span>
      } @else if (todosQuery.isLoading()) {
        <span>Loading...</span>
      } @else if (!todosQuery.isLoading() && !todosQuery.isError()) {
        <span>Not ready ...</span>
      }
    }

    <div>{{ todosQuery.isLoading() ? 'Fetching...' : '' }}</div>
  </div>`,
})
export class TodosComponent {
  readonly todosQuery = injectQuery(() => ({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
    enabled: false,
  }))
}

@Component({
  selector: 'todos',
  template: `
    <div>
      // 🚀 applying the filter will enable and execute the query
      <filters-form onApply="filter.set" />
      <todos-table data="todosQuery.data()" />
    </div>
  `,
})
export class TodosComponent {
  filter = signal('')

  readonly todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    enabled: !!this.filter(),
  }))
}

import { skipToken, injectQuery } from '@tanstack/angular-query-experimental'

@Component({
  selector: 'todos',
  template: `
    <div>
      // 🚀 applying the filter will enable and execute the query
      <filters-form onApply="filter.set" />
      <todos-table data="todosQuery.data()" />
    </div>
  `,
})
export class TodosComponent {
  filter = signal('')

  readonly todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: this.filter() ? () => fetchTodos(this.filter()) : skipToken,
  }))
}