docs(angular-query): angular examples improvements (#8782)

Author: arnoud-dv

Diff for: examples/angular/auto-refetching/src/app/components/auto-refetching.component.ts

@@ -14,19 +14,22 @@ import { TasksService } from '../services/tasks.service'
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'auto-refetching-example',
-  standalone: true,
   templateUrl: './auto-refetching.component.html',
   imports: [NgStyle],
 })
 export class AutoRefetchingExampleComponent {
-  #tasksService = inject(TasksService)
+  readonly #tasksService = inject(TasksService)
 
-  intervalMs = signal(1000)
+  readonly intervalMs = signal(1000)
 
-  tasks = injectQuery(() => this.#tasksService.allTasks(this.intervalMs()))
+  readonly tasks = injectQuery(() =>
+    this.#tasksService.allTasks(this.intervalMs()),
+  )
 
-  addMutation = injectMutation(() => this.#tasksService.addTask())
-  clearMutation = injectMutation(() => this.#tasksService.clearAllTasks())
+  readonly addMutation = injectMutation(() => this.#tasksService.addTask())
+  readonly clearMutation = injectMutation(() =>
+    this.#tasksService.clearAllTasks(),
+  )
 
   clearTasks() {
     this.clearMutation.mutate()

Diff for: examples/angular/auto-refetching/src/app/services/tasks.service.ts

@@ -12,8 +12,8 @@ import { lastValueFrom } from 'rxjs'
   providedIn: 'root',
 })
 export class TasksService {
-  #queryClient = inject(QueryClient) // Manages query state and caching
-  #http = inject(HttpClient) // Handles HTTP requests
+  readonly #queryClient = inject(QueryClient) // Manages query state and caching
+  readonly #http = inject(HttpClient) // Handles HTTP requests
 
   /**
    * Fetches all tasks from the API.

Diff for: examples/angular/basic/src/app/app.component.ts

@@ -9,5 +9,5 @@ import { PostsComponent } from './components/posts.component'
   imports: [PostComponent, PostsComponent],
 })
 export class BasicExampleComponent {
-  postId = signal(-1)
+  readonly postId = signal(-1)
 }

Diff for: examples/angular/basic/src/app/components/post.component.ts

@@ -1,38 +1,35 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
-  Output,
   inject,
   input,
+  output,
 } from '@angular/core'
-import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental'
+import { injectQuery } from '@tanstack/angular-query-experimental'
 import { fromEvent, lastValueFrom, takeUntil } from 'rxjs'
 import { PostsService } from '../services/posts-service'
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'post',
+  standalone: true,
   templateUrl: './post.component.html',
 })
 export class PostComponent {
-  #postsService = inject(PostsService)
+  readonly #postsService = inject(PostsService)
 
-  @Output() setPostId = new EventEmitter<number>()
+  readonly setPostId = output<number>()
+  readonly postId = input(0)
 
-  postId = input(0)
-
-  postQuery = injectQuery(() => ({
+  readonly postQuery = injectQuery(() => ({
     enabled: this.postId() > 0,
     queryKey: ['post', this.postId()],
-    queryFn: async (context) => {
+    queryFn: (context) => {
       // Cancels the request when component is destroyed before the request finishes
       const abort$ = fromEvent(context.signal, 'abort')
       return lastValueFrom(
         this.#postsService.postById$(this.postId()).pipe(takeUntil(abort$)),
       )
     },
   }))
-
-  queryClient = inject(QueryClient)
 }

Diff for: examples/angular/basic/src/app/components/posts.component.html

@@ -1,35 +1,31 @@
 <div>
   <h1>Posts</h1>
-  @switch (postsQuery.status()) {
-    @case ('pending') {
-      Loading...
-    }
-    @case ('error') {
-      Error: {{ postsQuery.error()?.message }}
-    }
-    @default {
-      <div class="todo-container">
-        @for (post of postsQuery.data(); track post.id) {
-          <p>
-            <!--          We can access the query data here to show bold links for-->
-            <!--          ones that are cached-->
-            <a
-              href="#"
-              (click)="setPostId.emit(post.id)"
-              [style]="
-                queryClient.getQueryData(['post', post.id])
-                  ? {
-                      fontWeight: 'bold',
-                      color: 'green',
-                    }
-                  : {}
-              "
-              >{{ post.title }}</a
-            >
-          </p>
-        }
-      </div>
-    }
+  @if (postsQuery.isPending()) {
+    Loading...
+  } @else if (postsQuery.isError()) {
+    Error: {{ postsQuery.error().message }}
+  } @else if (postsQuery.isSuccess()) {
+    <div class="todo-container">
+      @for (post of postsQuery.data(); track post.id) {
+        <p>
+          <!--          We can access the query data here to show bold links for-->
+          <!--          ones that are cached-->
+          <a
+            href="#"
+            (click)="setPostId.emit(post.id)"
+            [style]="
+              queryClient.getQueryData(['post', post.id])
+                ? {
+                    fontWeight: 'bold',
+                    color: 'green',
+                  }
+                : {}
+            "
+            >{{ post.title }}</a
+          >
+        </p>
+      }
+    </div>
   }
   <div>
     @if (postsQuery.isFetching()) {

Diff for: examples/angular/basic/src/app/components/posts.component.ts

@@ -1,9 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
-  Output,
   inject,
+  output,
 } from '@angular/core'
 import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental'
 import { lastValueFrom } from 'rxjs'
@@ -15,12 +14,11 @@ import { PostsService } from '../services/posts-service'
   templateUrl: './posts.component.html',
 })
 export class PostsComponent {
-  queryClient = inject(QueryClient)
-  #postsService = inject(PostsService)
+  readonly queryClient = inject(QueryClient)
+  readonly #postsService = inject(PostsService)
+  readonly setPostId = output<number>()
 
-  @Output() setPostId = new EventEmitter<number>()
-
-  postsQuery = injectQuery(() => ({
+  readonly postsQuery = injectQuery(() => ({
     queryKey: ['posts'],
     queryFn: () => lastValueFrom(this.#postsService.allPosts$()),
   }))

Diff for: examples/angular/basic/src/app/services/posts-service.ts

@@ -5,7 +5,7 @@ import { Injectable, inject } from '@angular/core'
   providedIn: 'root',
 })
 export class PostsService {
-  #http = inject(HttpClient)
+  readonly #http = inject(HttpClient)
 
   postById$ = (postId: number) =>
     this.#http.get<Post>(`https://jsonplaceholder.typicode.com/posts/${postId}`)

Diff for: examples/angular/devtools-panel/src/app/app.config.ts

@@ -4,7 +4,6 @@ import { provideRouter } from '@angular/router'
 import {
   QueryClient,
   provideTanStackQuery,
-  withDevtools,
 } from '@tanstack/angular-query-experimental'
 import { routes } from './app.routes'
 import type { ApplicationConfig } from '@angular/core'
@@ -13,6 +12,6 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(withFetch()),
     provideRouter(routes),
-    provideTanStackQuery(new QueryClient(), withDevtools()),
+    provideTanStackQuery(new QueryClient()),
   ],
 }

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

@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, viewChild } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  signal,
+  viewChild,
+} from '@angular/core'
 import { injectDevtoolsPanel } from '@tanstack/angular-query-devtools-experimental'
 import { ExampleQueryComponent } from './example-query.component'
 import type { ElementRef } from '@angular/core'
@@ -13,20 +18,24 @@ 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)="isOpen = !isOpen">
-      {{ isOpen ? 'Close' : 'Open' }} the devtools panel
+    <button type="button" (click)="toggleIsOpen()">
+      {{ isOpen() ? 'Close' : 'Open' }} the devtools panel
     </button>
-    @if (isOpen) {
+    @if (isOpen()) {
       <div #div style="height: 500px"></div>
     }
   `,
   imports: [ExampleQueryComponent],
 })
 export default class BasicDevtoolsPanelExampleComponent {
-  isOpen = false
-  divEl = viewChild<ElementRef>('div')
+  readonly isOpen = signal(false)
+  readonly divEl = viewChild<ElementRef>('div')
 
-  devtools = injectDevtoolsPanel(() => ({
+  toggleIsOpen() {
+    this.isOpen.update((prev) => !prev)
+  }
+
+  readonly devtools = injectDevtoolsPanel(() => ({
     hostElement: this.divEl(),
   }))
 }

Diff for: examples/angular/devtools-panel/src/app/components/example-query.component.ts

@@ -33,9 +33,9 @@ interface Response {
   `,
 })
 export class ExampleQueryComponent {
-  #http = inject(HttpClient)
+  readonly #http = inject(HttpClient)
 
-  query = injectQuery(() => ({
+  readonly query = injectQuery(() => ({
     queryKey: ['repoData'],
     queryFn: () =>
       lastValueFrom(

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

@@ -3,7 +3,9 @@ import {
   Component,
   Injector,
   computed,
+  effect,
   inject,
+  signal,
   viewChild,
 } from '@angular/core'
 import { ExampleQueryComponent } from './example-query.component'
@@ -20,33 +22,38 @@ import type { DevtoolsPanelRef } from '@tanstack/angular-query-devtools-experime
       In this example, the devtools panel is loaded programmatically when the
       button is clicked. In addition, the code is lazy loaded.
     </p>
-    <button type="button" (click)="toggleDevtools()">
-      {{ isOpen ? 'Close' : 'Open' }} the devtools panel
+    <button type="button" (click)="toggleIsOpen()">
+      {{ isOpen() ? 'Close' : 'Open' }} the devtools panel
     </button>
-    @if (isOpen) {
+    @if (isOpen()) {
       <div #div style="height: 500px"></div>
     }
   `,
   imports: [ExampleQueryComponent],
 })
 export default class LazyLoadDevtoolsPanelExampleComponent {
-  isOpen = false
-  devtools?: Promise<DevtoolsPanelRef>
-  injector = inject(Injector)
+  readonly isOpen = signal(false)
+  readonly devtools = signal<Promise<DevtoolsPanelRef> | undefined>(undefined)
+  readonly injector = inject(Injector)
 
-  divEl = viewChild<ElementRef>('div')
-  devToolsOptions = computed(() => ({
+  readonly divEl = viewChild<ElementRef>('div')
+  readonly devToolsOptions = computed(() => ({
     hostElement: this.divEl(),
   }))
 
-  toggleDevtools() {
-    this.isOpen = !this.isOpen
-    if (!this.devtools) {
-      this.devtools = import(
-        '@tanstack/angular-query-devtools-experimental'
-      ).then(({ injectDevtoolsPanel }) =>
-        injectDevtoolsPanel(this.devToolsOptions, this.injector),
+  toggleIsOpen() {
+    this.isOpen.update((prev) => !prev)
+  }
+
+  readonly loadDevtoolsEffect = effect(() => {
+    if (this.devtools()) return
+    if (this.isOpen()) {
+      this.devtools.set(
+        import('@tanstack/angular-query-devtools-experimental').then(
+          ({ injectDevtoolsPanel }) =>
+            injectDevtoolsPanel(this.devToolsOptions, this.injector),
+        ),
       )
     }
-  }
+  })
 }

Diff for: examples/angular/infinite-query-with-max-pages/src/app/components/example.component.ts

@@ -16,9 +16,9 @@ import { ProjectsService } from '../services/projects.service'
   imports: [ProjectStyleDirective],
 })
 export class ExampleComponent {
-  projectsService = inject(ProjectsService)
+  readonly projectsService = inject(ProjectsService)
 
-  query = injectInfiniteQuery(() => ({
+  readonly query = injectInfiniteQuery(() => ({
     queryKey: ['projects'],
     queryFn: ({ pageParam }) => {
       return lastValueFrom(this.projectsService.getProjects(pageParam))
@@ -29,29 +29,31 @@ export class ExampleComponent {
     maxPages: 3,
   }))
 
-  nextButtonDisabled = computed(
+  readonly nextButtonDisabled = computed(
     () => !this.#hasNextPage() || this.#isFetchingNextPage(),
   )
-  nextButtonText = computed(() =>
+
+  readonly nextButtonText = computed(() =>
     this.#isFetchingNextPage()
       ? 'Loading more...'
       : this.#hasNextPage()
         ? 'Load newer'
         : 'Nothing more to load',
   )
-  previousButtonDisabled = computed(
+
+  readonly previousButtonDisabled = computed(
     () => !this.#hasPreviousPage() || this.#isFetchingNextPage(),
   )
-  previousButtonText = computed(() =>
+  readonly previousButtonText = computed(() =>
     this.#isFetchingPreviousPage()
       ? 'Loading more...'
       : this.#hasPreviousPage()
         ? 'Load Older'
         : 'Nothing more to load',
   )
 
-  #hasPreviousPage = this.query.hasPreviousPage
-  #hasNextPage = this.query.hasNextPage
-  #isFetchingPreviousPage = this.query.isFetchingPreviousPage
-  #isFetchingNextPage = this.query.isFetchingNextPage
+  readonly #hasPreviousPage = this.query.hasPreviousPage
+  readonly #hasNextPage = this.query.hasNextPage
+  readonly #isFetchingPreviousPage = this.query.isFetchingPreviousPage
+  readonly #isFetchingNextPage = this.query.isFetchingNextPage
 }