docs(angular-query): fix quickstart

Author: eneajaho

docs/angular/devtools.md

@@ -18,7 +18,7 @@ $ yarn add @tanstack/angular-query-devtools-experimental
 You can import the devtools like this:
 
 ```typescript
-import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
+import { AngularQueryDevtoolsComponent } from '@tanstack/angular-query-devtools-experimental'
 ```
 
 ## Floating Mode

docs/angular/overview.md

@@ -23,14 +23,6 @@ import { CommonModule } from '@angular/common'
 import { injectQuery } from '@tanstack/angular-query-experimental'
 import { lastValueFrom } from 'rxjs'
 
-type Response = {
-  name: string
-  description: string
-  subscribers_count: number
-  stargazers_count: number
-  forks_count: number
-}
-
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'simple-example',
@@ -65,4 +57,12 @@ export class SimpleExampleComponent {
       ),
   }))
 }
+
+type Response = {
+  name: string
+  description: string
+  subscribers_count: number
+  stargazers_count: number
+  forks_count: number
+}
 ```

docs/angular/quick-start.md

@@ -20,24 +20,28 @@ bootstrapApplication(AppComponent, {
 ### Component with query and mutation
 
 ```typescript
+import { Component, Injectable, inject } from '@angular/core'
+import { HttpClient } from '@angular/common/http'
+import { lastValueFrom } from 'rxjs'
+
 import {
   injectMutation,
   injectQuery,
   injectQueryClient
 } from '@tanstack/angular-query-experimental'
-import { getTodos, postTodo } from '../my-api'
+
 
 @Component({
   standalone: true,
   template: `
     <div>
+      <button (click)="onAddTodo()">Add Todo</button>
+
       <ul>
-        @for (todo of query().data) {
+        @for (todo of query.data(); track todo.title) {
           <li>{{ todo.title }}</li>
         }
       </ul>
-
-      <button (click)="onAddTodo()">Add Todo</button>
     </div>
   `,
 })
@@ -46,26 +50,43 @@ export class TodosComponent {
 
   query = injectQuery(() => ({
     queryKey: ['todos'],
-    queryFn: getTodos
+    queryFn: () => this.todoService.getTodos(),
   }))
 
   mutation = injectMutation((client) => ({
-    mutationFn: postTodo,
+    mutationFn: (todo: Todo) => this.todoService.addTodo(todo),
     onSuccess: () => {
       // Invalidate and refetch by using the client directly
       client.invalidateQueries({ queryKey: ['todos'] })
 
       // OR use the queryClient that is injected into the component
-      this.queryClient.invalidateQueries({ queryKey: ['todos'] })
+      // this.queryClient.invalidateQueries({ queryKey: ['todos'] })
     }
   }))
 
   onAddTodo() {
     this.mutation().mutate({
-      id: Date.now(),
+      id: Date.now().toString(),
       title: 'Do Laundry',
     })
   }
+  
+@Injectable({providedIn: 'root'})
+export class TodoService {
+  private http = inject(HttpClient);
+
+  getTodos(): Promise<Todo[]> {
+    return lastValueFrom(this.http.get<Todo[]>('https://jsonplaceholder.typicode.com/todos'))
+  }
+
+  addTodo(todo: Todo): Promise<Todo> {
+    return lastValueFrom(this.http.post<Todo>('https://jsonplaceholder.typicode.com/todos', todo))
+  }
+}
+
+interface Todo {
+  id: string;
+  title: string;
 }
 ```