adapter.md

title	TanStack Devtools Angular Adapter
id	adapter

The Angular adapter wraps TanStackDevtoolsCore in an Angular standalone component, using Angular's createComponent and ApplicationRef.attachView to dynamically render plugins into the correct DOM containers managed by the devtools shell.

Installation

npm install @tanstack/angular-devtools

Component Inputs

The TanStackDevtools (selector: tanstack-devtools) accepts the following signal-based inputs, defined by the TanStackDevtoolsAngularInit interface:

Input	Type	Description
plugins	TanStackDevtoolsAngularPlugin[]	Array of plugins to render inside the devtools panel.
config	Partial<TanStackDevtoolsConfig>	Configuration for the devtools shell. Sets the initial state on first load; afterwards settings are persisted in local storage.
eventBusConfig	ClientEventBusConfig	Configuration for the TanStack Devtools client event bus.

Plugin Type

Each plugin in the plugins array must conform to the TanStackDevtoolsAngularPlugin type:

type TanStackDevtoolsAngularPlugin = {
  id?: string
  render: TanStackDevtoolsAngularPluginRender
  name: string | Type<any>
  inputs?: Record<string, any>
  defaultOpen?: boolean
}

Field	Type	Description
id	string (optional)	Unique identifier for the plugin.
render	Type<any>	The Angular component class to render as the plugin panel content.
name	string | Type<any>	Display name for the tab title. Can be a plain string or an Angular component class for custom rendering.
inputs	Record<string, any> (optional)	Additional inputs passed to the plugin component via setInput().
defaultOpen	boolean (optional)	Whether this plugin tab should be open by default.

Key Differences from Other Frameworks

The Angular adapter uses component (an Angular component class reference) instead of render (a JSX element) in plugin definitions. Inputs are provided through the inputs field and bound to the component with setInput(), rather than being embedded directly in a JSX expression or passed via v-bind.

import { Component } from '@angular/core'
import { TanStackDevtools } from '@tanstack/angular-devtools'
import { AngularQueryDevtoolsPanel } from '@tanstack/angular-query-devtools'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TanStackDevtools],
  template: `
    <tanstack-devtools [plugins]="plugins" />
  `,
})
export class App {
  plugins = [
    {
      name: 'Angular Query',
      render: AngularQueryDevtoolsPanel,
      inputs: { style: 'height: 100%' },
    },
  ]
}

Exports

The @tanstack/angular-devtools package exports:

• TanStackDevtools -- The main Angular standalone component that renders the devtools panel.
• TanStackDevtoolsAngularPlugin (type) -- The type for plugin definitions.
• TanStackDevtoolsAngularInit (type) -- The inputs interface for the TanStackDevtoolsComponent.

The package depends on @tanstack/devtools (the core package), which provides TanStackDevtoolsCore, TanStackDevtoolsConfig, ClientEventBusConfig, and other core utilities.