docs(angular-query): improve examples (TanStack#8273)

Author: arnoud-dv

docs/config.json

@@ -1043,7 +1043,7 @@
               "to": "framework/angular/examples/pagination"
             },
             {
-              "label": "Infinite query with Max pages",
+              "label": "Infinite query with maxPages",
               "to": "framework/angular/examples/infinite-query-with-max-pages"
             },
             {
@@ -1057,6 +1057,10 @@
             {
               "label": "Query options from a service",
               "to": "framework/angular/examples/query-options-from-a-service"
+            },
+            {
+              "label": "Devtools embedded panel",
+              "to": "framework/angular/examples/devtools-panel"
             }
           ]
         }

examples/angular/devtools-panel/src/app/app.config.ts

@@ -1,10 +1,17 @@
 import { provideHttpClient, withFetch } from '@angular/common/http'
 
 import { provideRouter } from '@angular/router'
+import {
+  QueryClient,
+  provideTanStackQuery,
+} from '@tanstack/angular-query-experimental'
 import { routes } from './app.routes'
 import type { ApplicationConfig } from '@angular/core'
 
 export const appConfig: ApplicationConfig = {
-  // In this example, `provideTanStackQuery` is used in the router
-  providers: [provideHttpClient(withFetch()), provideRouter(routes)],
+  providers: [
+    provideHttpClient(withFetch()),
+    provideRouter(routes),
+    provideTanStackQuery(new QueryClient()),
+  ],
 }

examples/angular/devtools-panel/src/app/app.routes.ts

@@ -1,7 +1,3 @@
-import {
-  QueryClient,
-  provideTanStackQuery,
-} from '@tanstack/angular-query-experimental'
 import type { Route } from '@angular/router'
 
 export const routes: Array<Route> = [
@@ -14,12 +10,10 @@ export const routes: Array<Route> = [
     path: 'basic',
     loadComponent: () =>
       import('./components/basic-devtools-panel-example.component'),
-    providers: [provideTanStackQuery(new QueryClient())],
   },
   {
     path: 'lazy',
     loadComponent: () =>
       import('./components/lazy-load-devtools-panel-example.component'),
-    providers: [provideTanStackQuery(new QueryClient())],
   },
 ]

examples/angular/devtools-panel/src/app/components/basic-devtools-panel-example.component.ts

@@ -1,9 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  signal,
-  viewChild,
-} from '@angular/core'
+import { ChangeDetectionStrategy, Component, viewChild } from '@angular/core'
 import { injectDevtoolsPanel } from '@tanstack/angular-query-devtools-experimental'
 import { ExampleQueryComponent } from './example-query.component'
 import type { ElementRef } from '@angular/core'
@@ -19,24 +14,19 @@ import type { ElementRef } from '@angular/core'
       In this example, the devtools panel is loaded programmatically when the
       button is clicked
     </p>
-    <button type="button" (click)="toggleDevtools()">
-      {{ isOpen() ? 'Close' : 'Open' }} the devtools panel
+    <button type="button" (click)="isOpen = !isOpen">
+      {{ isOpen ? 'Close' : 'Open' }} the devtools panel
     </button>
-    @if (isOpen()) {
+    @if (isOpen) {
       <div #div style="height: 500px"></div>
     }
   `,
-
   imports: [ExampleQueryComponent],
 })
 export default class BasicDevtoolsPanelExampleComponent {
-  isOpen = signal(false)
+  isOpen = false
   divEl = viewChild<ElementRef>('div')
 
-  toggleDevtools() {
-    this.isOpen.update((prev) => !prev)
-  }
-
   devtools = injectDevtoolsPanel(() => ({
     hostElement: this.divEl(),
   }))

examples/angular/devtools-panel/src/app/components/lazy-load-devtools-panel-example.component.ts

@@ -2,9 +2,8 @@ import {
   ChangeDetectionStrategy,
   Component,
   Injector,
-  effect,
+  computed,
   inject,
-  signal,
   viewChild,
 } from '@angular/core'
 import { ExampleQueryComponent } from './example-query.component'
@@ -20,48 +19,35 @@ import type { DevtoolsPanelRef } from '@tanstack/angular-query-devtools-experime
     <h1>Lazy load devtools panel example</h1>
     <p>
       In this example, the devtools panel is loaded programmatically when the
-      button is clicked. In addition, the code is lazy loaded
+      button is clicked. In addition, the code is lazy loaded.
     </p>
     <button type="button" (click)="toggleDevtools()">
-      {{ isOpen() ? 'Close' : 'Open' }} the devtools panel
+      {{ isOpen ? 'Close' : 'Open' }} the devtools panel
     </button>
-    @if (isOpen()) {
+    @if (isOpen) {
       <div #div style="height: 500px"></div>
     }
   `,
   imports: [ExampleQueryComponent],
 })
 export default class LazyLoadDevtoolsPanelExampleComponent {
-  isOpen = signal(false)
-  divEl = viewChild<ElementRef>('div')
-  devtools?: DevtoolsPanelRef
+  isOpen = false
+  devtools?: Promise<DevtoolsPanelRef>
   injector = inject(Injector)
 
-  toggleDevtools() {
-    this.isOpen.update((prev) => !prev)
-  }
-
-  constructor() {
-    effect(() => {
-      const isOpen = this.isOpen()
-      if (!isOpen || this.devtools) return
-      void this.lazyInitDevtools()
-    })
-  }
+  divEl = viewChild<ElementRef>('div')
+  devToolsOptions = computed(() => ({
+    hostElement: this.divEl(),
+  }))
 
-  async lazyInitDevtools() {
-    // As the import is dynamic, it will not be included in the main bundle
-    // and will be lazy loaded only when the button is clicked
-    // Instead of a button you could also define a keyboard shortcut to
-    // load the devtools panel on demand
-    const { injectDevtoolsPanel } = await import(
-      '@tanstack/angular-query-devtools-experimental'
-    )
-    this.devtools = injectDevtoolsPanel(
-      () => ({
-        hostElement: this.divEl(),
-      }),
-      this.injector,
-    )
+  toggleDevtools() {
+    this.isOpen = !this.isOpen
+    if (!this.devtools) {
+      this.devtools = import(
+        '@tanstack/angular-query-devtools-experimental'
+      ).then(({ injectDevtoolsPanel }) =>
+        injectDevtoolsPanel(this.devToolsOptions, this.injector),
+      )
+    }
   }
 }

examples/angular/query-options-from-a-service/src/app/services/posts-service.ts

@@ -1,27 +1,42 @@
 import { Injectable, inject } from '@angular/core'
 import { lastValueFrom } from 'rxjs'
 import { queryOptions } from '@tanstack/angular-query-experimental'
-import { PostsService } from './posts-service'
+import { HttpClient } from '@angular/common/http'
+
+export interface Post {
+  id: number
+  title: string
+  body: string
+}
 
 @Injectable({
   providedIn: 'root',
 })
 export class QueriesService {
-  private postsService = inject(PostsService)
+  private http = inject(HttpClient)
 
   post(postId: number) {
     return queryOptions({
       queryKey: ['post', postId],
       queryFn: () => {
-        return lastValueFrom(this.postsService.postById$(postId))
+        return lastValueFrom(
+          this.http.get<Post>(
+            `https://jsonplaceholder.typicode.com/posts/${postId}`,
+          ),
+        )
       },
     })
   }
 
   posts() {
     return queryOptions({
       queryKey: ['posts'],
-      queryFn: () => lastValueFrom(this.postsService.allPosts$()),
+      queryFn: () =>
+        lastValueFrom(
+          this.http.get<Array<Post>>(
+            'https://jsonplaceholder.typicode.com/posts',
+          ),
+        ),
     })
   }
 }