docs(angular-query): fix angular examples (#8335)

Author: arnoud-dv

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

@@ -4,6 +4,7 @@ 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'
@@ -12,6 +13,6 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(withFetch()),
     provideRouter(routes),
-    provideTanStackQuery(new QueryClient()),
+    provideTanStackQuery(new QueryClient(), withDevtools()),
   ],
 }

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

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

examples/angular/rxjs/src/app/app.config.ts

@@ -6,6 +6,7 @@ import {
 import {
   QueryClient,
   provideTanStackQuery,
+  withDevtools,
 } from '@tanstack/angular-query-experimental'
 import { autocompleteMockInterceptor } from './api/autocomplete-mock.interceptor'
 import type { ApplicationConfig } from '@angular/core'
@@ -24,6 +25,7 @@ export const appConfig: ApplicationConfig = {
           },
         },
       }),
+      withDevtools(),
     ),
   ],
 }

examples/angular/rxjs/src/app/services/autocomplete-service.ts

@@ -14,5 +14,7 @@ export class AutocompleteService {
   getSuggestions = (term: string = '') =>
     term.trim() === ''
       ? of({ suggestions: [] })
-      : this.#http.get<Response>(`/api/autocomplete?term=${term}`)
+      : this.#http.get<Response>(
+          `/api/autocomplete?term=${encodeURIComponent(term)}`,
+        )
 }