The devtools are a separate package that you need to install:
npm i @tanstack/angular-query-devtools-experimental
npm i @tanstack/angular-query-devtools-experimental
or
pnpm add @tanstack/angular-query-devtools-experimental
pnpm add @tanstack/angular-query-devtools-experimental
or
yarn add @tanstack/angular-query-devtools-experimental
yarn add @tanstack/angular-query-devtools-experimental
or
bun add @tanstack/angular-query-devtools-experimental
bun add @tanstack/angular-query-devtools-experimental
You can import the devtools like this:
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
Place the following code as high in your Angular app as you can. The closer it is to the root of the page, the better it will work!
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
imports: [AngularQueryDevtools],
template: `
<angular-query-devtools initialIsOpen />
`,
})
import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
imports: [AngularQueryDevtools],
template: `
<angular-query-devtools initialIsOpen />
`,
})