Skip to content

Commit 6b7ae80

Browse files
arnoud-dvDogPawHat
authored andcommitted
docs(angular-query): angular examples improvements (#8782)
1 parent e936c50 commit 6b7ae80

File tree

27 files changed

+173
-163
lines changed

27 files changed

+173
-163
lines changed

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,22 @@ import { TasksService } from '../services/tasks.service'
1414
@Component({
1515
changeDetection: ChangeDetectionStrategy.OnPush,
1616
selector: 'auto-refetching-example',
17-
standalone: true,
1817
templateUrl: './auto-refetching.component.html',
1918
imports: [NgStyle],
2019
})
2120
export class AutoRefetchingExampleComponent {
22-
#tasksService = inject(TasksService)
21+
readonly #tasksService = inject(TasksService)
2322

24-
intervalMs = signal(1000)
23+
readonly intervalMs = signal(1000)
2524

26-
tasks = injectQuery(() => this.#tasksService.allTasks(this.intervalMs()))
25+
readonly tasks = injectQuery(() =>
26+
this.#tasksService.allTasks(this.intervalMs()),
27+
)
2728

28-
addMutation = injectMutation(() => this.#tasksService.addTask())
29-
clearMutation = injectMutation(() => this.#tasksService.clearAllTasks())
29+
readonly addMutation = injectMutation(() => this.#tasksService.addTask())
30+
readonly clearMutation = injectMutation(() =>
31+
this.#tasksService.clearAllTasks(),
32+
)
3033

3134
clearTasks() {
3235
this.clearMutation.mutate()

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import { lastValueFrom } from 'rxjs'
1212
providedIn: 'root',
1313
})
1414
export class TasksService {
15-
#queryClient = inject(QueryClient) // Manages query state and caching
16-
#http = inject(HttpClient) // Handles HTTP requests
15+
readonly #queryClient = inject(QueryClient) // Manages query state and caching
16+
readonly #http = inject(HttpClient) // Handles HTTP requests
1717

1818
/**
1919
* Fetches all tasks from the API.

examples/angular/basic/src/app/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@ import { PostsComponent } from './components/posts.component'
99
imports: [PostComponent, PostsComponent],
1010
})
1111
export class BasicExampleComponent {
12-
postId = signal(-1)
12+
readonly postId = signal(-1)
1313
}
Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,35 @@
11
import {
22
ChangeDetectionStrategy,
33
Component,
4-
EventEmitter,
5-
Output,
64
inject,
75
input,
6+
output,
87
} from '@angular/core'
9-
import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental'
8+
import { injectQuery } from '@tanstack/angular-query-experimental'
109
import { fromEvent, lastValueFrom, takeUntil } from 'rxjs'
1110
import { PostsService } from '../services/posts-service'
1211

1312
@Component({
1413
changeDetection: ChangeDetectionStrategy.OnPush,
1514
selector: 'post',
15+
standalone: true,
1616
templateUrl: './post.component.html',
1717
})
1818
export class PostComponent {
19-
#postsService = inject(PostsService)
19+
readonly #postsService = inject(PostsService)
2020

21-
@Output() setPostId = new EventEmitter<number>()
21+
readonly setPostId = output<number>()
22+
readonly postId = input(0)
2223

23-
postId = input(0)
24-
25-
postQuery = injectQuery(() => ({
24+
readonly postQuery = injectQuery(() => ({
2625
enabled: this.postId() > 0,
2726
queryKey: ['post', this.postId()],
28-
queryFn: async (context) => {
27+
queryFn: (context) => {
2928
// Cancels the request when component is destroyed before the request finishes
3029
const abort$ = fromEvent(context.signal, 'abort')
3130
return lastValueFrom(
3231
this.#postsService.postById$(this.postId()).pipe(takeUntil(abort$)),
3332
)
3433
},
3534
}))
36-
37-
queryClient = inject(QueryClient)
3835
}

examples/angular/basic/src/app/components/posts.component.html

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,31 @@
11
<div>
22
<h1>Posts</h1>
3-
@switch (postsQuery.status()) {
4-
@case ('pending') {
5-
Loading...
6-
}
7-
@case ('error') {
8-
Error: {{ postsQuery.error()?.message }}
9-
}
10-
@default {
11-
<div class="todo-container">
12-
@for (post of postsQuery.data(); track post.id) {
13-
<p>
14-
<!-- We can access the query data here to show bold links for-->
15-
<!-- ones that are cached-->
16-
<a
17-
href="#"
18-
(click)="setPostId.emit(post.id)"
19-
[style]="
20-
queryClient.getQueryData(['post', post.id])
21-
? {
22-
fontWeight: 'bold',
23-
color: 'green',
24-
}
25-
: {}
26-
"
27-
>{{ post.title }}</a
28-
>
29-
</p>
30-
}
31-
</div>
32-
}
3+
@if (postsQuery.isPending()) {
4+
Loading...
5+
} @else if (postsQuery.isError()) {
6+
Error: {{ postsQuery.error().message }}
7+
} @else if (postsQuery.isSuccess()) {
8+
<div class="todo-container">
9+
@for (post of postsQuery.data(); track post.id) {
10+
<p>
11+
<!-- We can access the query data here to show bold links for-->
12+
<!-- ones that are cached-->
13+
<a
14+
href="#"
15+
(click)="setPostId.emit(post.id)"
16+
[style]="
17+
queryClient.getQueryData(['post', post.id])
18+
? {
19+
fontWeight: 'bold',
20+
color: 'green',
21+
}
22+
: {}
23+
"
24+
>{{ post.title }}</a
25+
>
26+
</p>
27+
}
28+
</div>
3329
}
3430
<div>
3531
@if (postsQuery.isFetching()) {

examples/angular/basic/src/app/components/posts.component.ts

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import {
22
ChangeDetectionStrategy,
33
Component,
4-
EventEmitter,
5-
Output,
64
inject,
5+
output,
76
} from '@angular/core'
87
import { QueryClient, injectQuery } from '@tanstack/angular-query-experimental'
98
import { lastValueFrom } from 'rxjs'
@@ -15,12 +14,11 @@ import { PostsService } from '../services/posts-service'
1514
templateUrl: './posts.component.html',
1615
})
1716
export class PostsComponent {
18-
queryClient = inject(QueryClient)
19-
#postsService = inject(PostsService)
17+
readonly queryClient = inject(QueryClient)
18+
readonly #postsService = inject(PostsService)
19+
readonly setPostId = output<number>()
2020

21-
@Output() setPostId = new EventEmitter<number>()
22-
23-
postsQuery = injectQuery(() => ({
21+
readonly postsQuery = injectQuery(() => ({
2422
queryKey: ['posts'],
2523
queryFn: () => lastValueFrom(this.#postsService.allPosts$()),
2624
}))

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Injectable, inject } from '@angular/core'
55
providedIn: 'root',
66
})
77
export class PostsService {
8-
#http = inject(HttpClient)
8+
readonly #http = inject(HttpClient)
99

1010
postById$ = (postId: number) =>
1111
this.#http.get<Post>(`https://jsonplaceholder.typicode.com/posts/${postId}`)

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { provideRouter } from '@angular/router'
44
import {
55
QueryClient,
66
provideTanStackQuery,
7-
withDevtools,
87
} from '@tanstack/angular-query-experimental'
98
import { routes } from './app.routes'
109
import type { ApplicationConfig } from '@angular/core'
@@ -13,6 +12,6 @@ export const appConfig: ApplicationConfig = {
1312
providers: [
1413
provideHttpClient(withFetch()),
1514
provideRouter(routes),
16-
provideTanStackQuery(new QueryClient(), withDevtools()),
15+
provideTanStackQuery(new QueryClient()),
1716
],
1817
}
Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { ChangeDetectionStrategy, Component, viewChild } from '@angular/core'
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
signal,
5+
viewChild,
6+
} from '@angular/core'
27
import { injectDevtoolsPanel } from '@tanstack/angular-query-devtools-experimental'
38
import { ExampleQueryComponent } from './example-query.component'
49
import type { ElementRef } from '@angular/core'
@@ -13,20 +18,24 @@ import type { ElementRef } from '@angular/core'
1318
In this example, the devtools panel is loaded programmatically when the
1419
button is clicked
1520
</p>
16-
<button type="button" (click)="isOpen = !isOpen">
17-
{{ isOpen ? 'Close' : 'Open' }} the devtools panel
21+
<button type="button" (click)="toggleIsOpen()">
22+
{{ isOpen() ? 'Close' : 'Open' }} the devtools panel
1823
</button>
19-
@if (isOpen) {
24+
@if (isOpen()) {
2025
<div #div style="height: 500px"></div>
2126
}
2227
`,
2328
imports: [ExampleQueryComponent],
2429
})
2530
export default class BasicDevtoolsPanelExampleComponent {
26-
isOpen = false
27-
divEl = viewChild<ElementRef>('div')
31+
readonly isOpen = signal(false)
32+
readonly divEl = viewChild<ElementRef>('div')
2833

29-
devtools = injectDevtoolsPanel(() => ({
34+
toggleIsOpen() {
35+
this.isOpen.update((prev) => !prev)
36+
}
37+
38+
readonly devtools = injectDevtoolsPanel(() => ({
3039
hostElement: this.divEl(),
3140
}))
3241
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ interface Response {
3333
`,
3434
})
3535
export class ExampleQueryComponent {
36-
#http = inject(HttpClient)
36+
readonly #http = inject(HttpClient)
3737

38-
query = injectQuery(() => ({
38+
readonly query = injectQuery(() => ({
3939
queryKey: ['repoData'],
4040
queryFn: () =>
4141
lastValueFrom(

0 commit comments

Comments
 (0)