docs(angular-query): update overview and readme (#7994)

docs/framework/angular/overview.md

@@ -23,7 +23,7 @@ Most core web frameworks **do not** come with an opinionated way of fetching or
 
 While most traditional state management libraries are great for working with client state, they are **not so great at working with async or server state**. This is because **server state is totally different**. For starters, server state:
 
-- Is persisted remotely in a location you do not control or own
+- Is persisted remotely in a location you may not control or own
 - Requires asynchronous APIs for fetching and updating
 - Implies shared ownership and can be changed by other people without your knowledge
 - Can potentially become "out of date" in your applications if you're not careful
@@ -58,7 +58,7 @@ On a more technical note, Angular Query will likely:
 
 In the example below, you can see Angular Query in its most basic and simple form being used to fetch the GitHub stats for the TanStack Query GitHub project itself:
 
-[Open in CodeSandbox](https://codesandbox.io/s/github/tanstack/query/tree/main/examples/angular/simple)
+[Open in StackBlitz](https://stackblitz.com/github/TanStack/query/tree/main/examples/angular/simple)
 
 ```angular-ts
 import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
@@ -114,4 +114,4 @@ type Response = {
 
 ## You talked me into it, so what now?
 
-- Learn Angular Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/injectQuery)
+- Learn Angular Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/functions/injectquery)

examples/angular/router/src/app/components/post.component.ts

@@ -6,10 +6,7 @@ import {
   numberAttribute,
 } from '@angular/core'
 import { RouterLink } from '@angular/router'
-import {
-  injectQuery,
-  injectQueryClient,
-} from '@tanstack/angular-query-experimental'
+import { injectQuery } from '@tanstack/angular-query-experimental'
 import { lastValueFrom } from 'rxjs'
 import { PostsService } from '../services/posts-service'
 
@@ -22,7 +19,6 @@ import { PostsService } from '../services/posts-service'
 })
 export default class PostComponent {
   #postsService = inject(PostsService)
-  queryClient = injectQueryClient()
 
   postId = input.required({
     transform: numberAttribute,

packages/angular-query-experimental/README.md

@@ -7,7 +7,7 @@
 
 # Angular Query
 
-> IMPORTANT: This library is currently in an experimental stage. This means that breaking changes will happen in minor AND patch releases. Upgrade carefully. If you use this in production while in experimental stage, please lock your version to a patch-level version to avoid unexpected breaking changes.
+> IMPORTANT: This library is currently in an experimental stage. This means that breaking changes may happen in minor AND patch releases. Upgrade carefully. If you use this in production while in experimental stage, please lock your version to a patch-level version to avoid unexpected breaking changes.
 
 Functions for fetching, caching and updating asynchronous data in Angular
 
@@ -29,87 +29,105 @@ Visit https://tanstack.com/query/latest/docs/framework/angular/overview
 
 # Quick Start
 
-> Angular Query requires Angular 16.
+> Angular Query requires Angular 16 or higher.
 
 1. Install `angular-query`
 
-   ```bash
-   $ npm i @tanstack/angular-query-experimental
-   ```
+```bash
+$ npm i @tanstack/angular-query-experimental
+```
 
-   or
+or
 
-   ```bash
-   $ pnpm add @tanstack/angular-query-experimental
-   ```
+```bash
+$ pnpm add @tanstack/angular-query-experimental
+```
 
-   or
+or
 
-   ```bash
-   $ yarn add @tanstack/angular-query-experimental
-   ```
+```bash
+$ yarn add @tanstack/angular-query-experimental
+```
 
-   or
+or
 
-   ```bash
-   $ bun add @tanstack/angular-query-experimental
-   ```
+```bash
+$ bun add @tanstack/angular-query-experimental
+```
 
 2. Initialize **Angular Query** by adding **provideAngularQuery** to your application
 
-   ```ts
-   import { provideAngularQuery } from '@tanstack/angular-query-experimental'
-   import { QueryClient } from '@tanstack/angular-query-experimental'
+```ts
+import { provideAngularQuery } from '@tanstack/angular-query-experimental'
+import { QueryClient } from '@tanstack/angular-query-experimental'
 
-   bootstrapApplication(AppComponent, {
-     providers: [provideAngularQuery(new QueryClient())],
-   })
-   ```
+bootstrapApplication(AppComponent, {
+  providers: [provideAngularQuery(new QueryClient())],
+})
+```
 
-   or in a NgModule-based app
+or in a NgModule-based app
 
-   ```ts
-   import { provideHttpClient } from '@angular/common/http'
-   import {
-   provideAngularQuery,
-   QueryClient,
-   } from '@tanstack/angular-query-experimental'
+```ts
+import { provideHttpClient } from '@angular/common/http'
+import {
+  provideAngularQuery,
+  QueryClient,
+} from '@tanstack/angular-query-experimental'
 
-   @NgModule({
-     declarations: [AppComponent],
-     imports: [BrowserModule],
-     providers: [provideAngularQuery(new QueryClient())],
-     bootstrap: [AppComponent],
-   })
-   ```
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [provideAngularQuery(new QueryClient())],
+  bootstrap: [AppComponent],
+})
+```
 
 3. Inject query
 
-   ```ts
-   import { injectQuery } from '@tanstack/angular-query-experimental'
-   import { Component } from '@angular/core'
-
-   @Component({...})
-   export class TodosComponent {
-     info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
-   }
-   ```
-
-4. If you need to update options on your query dynamically, make sure to pass them as signals
-
-   ```ts
-   import { injectQuery } from '@tanstack/angular-query-experimental'
-   import { signal, Component } from '@angular/core'
-
-   @Component({...})
-   export class TodosComponent {
-     id = signal(1)
-     enabled = signal(false)
-
-     info = injectQuery(() => ({
-       queryKey: ['todos', this.id()],
-       queryFn: fetchTodoList,
-       enabled: this.enabled(),
-     }))
-   }
-   ```
+```ts
+import { injectQuery } from '@tanstack/angular-query-experimental'
+import { Component } from '@angular/core'
+
+@Component({...})
+export class TodosComponent {
+  info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
+}
+```
+
+4. If you need to update options on your query dynamically, make sure to pass them as signals. The query will refetch automatically if data for an updated query key is stale or not present.
+
+[Open in StackBlitz](https://stackblitz.com/github/TanStack/query/tree/main/examples/angular/router)
+
+```ts
+@Component({})
+export class PostComponent {
+  #postsService = inject(PostsService)
+  postId = input.required({
+    transform: numberAttribute,
+  })
+
+  postQuery = injectQuery(() => ({
+    queryKey: ['post', this.postId()],
+    queryFn: () => {
+      return lastValueFrom(this.#postsService.postById$(this.postId()))
+    },
+  }))
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PostsService {
+  #http = inject(HttpClient)
+
+  postById$ = (postId: number) =>
+    this.#http.get<Post>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+}
+
+export interface Post {
+  id: number
+  title: string
+  body: string
+}
+```