The devtools are a separate package that you need to install:
$ npm i @tanstack/angular-query-devtools-experimental
# or
$ pnpm add @tanstack/angular-query-devtools-experimental
# or
$ yarn add @tanstack/angular-query-devtools-experimental
# or
$ bun add @tanstack/angular-query-devtools-experimental
$ npm i @tanstack/angular-query-devtools-experimental
# or
$ pnpm add @tanstack/angular-query-devtools-experimental
# or
$ yarn add @tanstack/angular-query-devtools-experimental
# or
$ 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 />
`,
})
“This course is the best way to learn how to use React Query in real-world applications.”—Tanner LinsleyCheck it out