feat: add Angular support with setup, adapter, and custom plugin documentation

Author: AlemTuzlak

docs/config.json

@@ -45,6 +45,13 @@
             { "label": "Basic Setup", "to": "framework/vue/basic-setup" },
             { "label": "Vue Adapter", "to": "framework/vue/adapter" }
           ]
+        },
+        {
+          "label": "angular",
+          "children": [
+            { "label": "Basic Setup", "to": "framework/angular/basic-setup" },
+            { "label": "Angular Adapter", "to": "framework/angular/adapter" }
+          ]
         }
       ]
     },
@@ -89,6 +96,12 @@
           "children": [
             { "label": "Custom Plugins", "to": "framework/vue/guides/custom-plugins" }
           ]
+        },
+        {
+          "label": "angular",
+          "children": [
+            { "label": "Custom Plugins", "to": "framework/angular/guides/custom-plugins" }
+          ]
         }
       ]
     },
@@ -121,6 +134,12 @@
           "children": [
             { "label": "Vue Reference", "to": "framework/vue/reference/index" }
           ]
+        },
+        {
+          "label": "angular",
+          "children": [
+            { "label": "Angular Reference", "to": "framework/angular/reference/index" }
+          ]
         }
       ]
     },

docs/devtools-utils.md

@@ -37,6 +37,9 @@ import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/preact'
 
 // Vue
 import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/vue'
+
+// Angular
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/angular'
 ```
 
 ## React
@@ -252,6 +255,49 @@ const [MyPanel, NoOpPanel] = createVuePanel(MyDevtoolsCore)
 
 The panel component accepts `theme` and `devtoolsProps` as props. It mounts the core instance into a `div` element on `onMounted` and calls `unmount()` on `onUnmounted`.
 
+## Angular
+
+### createAngularPlugin
+
+The Angular factory takes a `name` string and an Angular component class as separate arguments, similar to the Vue API.
+
+**Signature:**
+
+```ts
+function createAngularPlugin(
+  name: string,
+  component: Type<any>,
+): readonly [Plugin, NoOpPlugin]
+```
+
+**Usage:**
+
+```ts
+import { createAngularPlugin } from '@tanstack/devtools-utils/angular'
+import { MyStorePanelComponent } from './my-store-panel.component'
+
+const [MyPlugin, NoOpPlugin] = createAngularPlugin('My Store', MyStorePanelComponent)
+```
+
+The returned functions:
+
+- **`Plugin(inputs?)`** -- returns `{ name, component, inputs }` where `component` is your Angular component class.
+- **`NoOpPlugin(inputs?)`** -- returns `{ name, component: NoOpComponent, inputs }` where the component is an empty standalone component (renders nothing visible).
+
+Both accept an optional `inputs` object that gets forwarded to the component via `setInput()`.
+
+### createAngularPanel
+
+For class-based devtools cores, Angular provides `createAngularPanel`. It creates a standalone Angular component that handles mounting and unmounting the core class:
+
+```ts
+import { createAngularPanel } from '@tanstack/devtools-utils/angular'
+
+const [MyPanel, NoOpPanel] = createAngularPanel(MyDevtoolsCore)
+```
+
+The panel component accepts `theme` and `devtoolsProps` as signal inputs. It mounts the core instance into a `div` element using `afterNextRender` and calls `unmount()` via `DestroyRef.onDestroy`.
+
 ## When to Use Factories vs Manual Plugin Objects
 
 **Use the factories** when you are building a reusable library plugin that will be published as a package. The factories ensure:

docs/framework/angular/adapter.md

@@ -0,0 +1,82 @@
+---
+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
+
+```sh
+npm install @tanstack/angular-devtools
+```
+
+## Component Inputs
+
+The `TanStackDevtoolsComponent` (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:
+
+```ts
+type TanStackDevtoolsAngularPlugin = {
+  id?: string
+  component: Type<any>
+  name: string | Type<any>
+  inputs?: Record<string, any>
+  defaultOpen?: boolean
+}
+```
+
+| Field | Type | Description |
+| --- | --- | --- |
+| `id` | `string` (optional) | Unique identifier for the plugin. |
+| `component` | `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`.
+
+```typescript
+import { Component } from '@angular/core'
+import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
+import { AngularQueryDevtoolsPanel } from '@tanstack/angular-query-devtools'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackDevtoolsComponent],
+  template: `
+    <tanstack-devtools [plugins]="plugins" />
+  `,
+})
+export class AppComponent {
+  plugins = [
+    {
+      name: 'Angular Query',
+      component: AngularQueryDevtoolsPanel,
+      inputs: { style: 'height: 100%' },
+    },
+  ]
+}
+```
+
+## Exports
+
+The `@tanstack/angular-devtools` package exports:
+
+- **`TanStackDevtoolsComponent`** -- 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.

docs/framework/angular/basic-setup.md

@@ -0,0 +1,63 @@
+---
+title: Basic setup
+id: basic-setup
+---
+
+TanStack Devtools provides you with an easy-to-use and modular client that allows you to compose multiple devtools into one easy-to-use panel.
+
+## Setup
+
+Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/angular-devtools) library. This will install the devtools core as well as provide you with the Angular-specific adapter.
+
+```bash
+npm i @tanstack/angular-devtools
+```
+
+Next, in the root of your application, import the `TanStackDevtoolsComponent` from `@tanstack/angular-devtools` and add it to your template.
+
+```typescript
+import { Component } from '@angular/core'
+import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackDevtoolsComponent],
+  template: `
+    <app-content />
+    <tanstack-devtools />
+  `,
+})
+export class AppComponent {}
+```
+
+Import the desired devtools and provide them to the `TanStackDevtoolsComponent` via the `[plugins]` input along with a label for the menu.
+
+```typescript
+import { Component } from '@angular/core'
+import { TanStackDevtoolsComponent } from '@tanstack/angular-devtools'
+import type { TanStackDevtoolsAngularPlugin } from '@tanstack/angular-devtools'
+import { AngularQueryDevtoolsPanel } from '@tanstack/angular-query-devtools'
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [TanStackDevtoolsComponent],
+  template: `
+    <app-content />
+    <tanstack-devtools [plugins]="plugins" />
+  `,
+})
+export class AppComponent {
+  plugins: Array<TanStackDevtoolsAngularPlugin> = [
+    {
+      name: 'Angular Query',
+      component: AngularQueryDevtoolsPanel,
+    },
+  ]
+}
+```
+
+> Note: The Angular adapter uses `component` (an Angular component class) instead of `render` (a JSX element) in plugin definitions. Additional inputs can be provided via the `inputs` field and are bound to the component with `setInput()`.
+
+Finally, add any additional configuration you desire to the `TanStackDevtoolsComponent`. More information can be found under the [TanStack Devtools Configuration](../../configuration) section.