Use signals for after and before

webapp/src/app/home/home.component.ts

@@ -1,9 +1,10 @@
-import { Component, inject } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { injectQuery } from '@tanstack/angular-query-experimental';
 import { LeaderboardService } from 'app/core/modules/openapi/api/leaderboard.service';
 import { LeaderboardComponent } from 'app/home/leaderboard/leaderboard.component';
 import { lastValueFrom } from 'rxjs';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-home',
@@ -16,19 +17,14 @@ export class HomeComponent {
 
   // timeframe for leaderboard
   // example: 2024-09-19T10:15:30+01:00
-  protected after: string | undefined = undefined;
-  protected before: string | undefined = undefined;
-
-  constructor() {
-    inject(ActivatedRoute).queryParamMap.subscribe((params) => {
-      this.after = params.get('after')?.replace(' ', '+') ?? undefined;
-      this.before = params.get('before')?.replace(' ', '+') ?? undefined;
-    });
-  }
+  private readonly route = inject(ActivatedRoute);
+  private queryParams = toSignal(this.route.queryParamMap, { requireSync: true });
+  protected after = computed(() => this.queryParams().get('after')?.replace(' ', '+') ?? undefined);
+  protected before = computed(() => this.queryParams().get('before')?.replace(' ', '+') ?? undefined);
 
   query = injectQuery(() => ({
     queryKey: ['leaderboard', { after: this.after, before: this.before }],
-    queryFn: async () => lastValueFrom(this.leaderboardService.getLeaderboard(this.before, this.after)),
+    queryFn: async () => lastValueFrom(this.leaderboardService.getLeaderboard(this.before(), this.after())),
     gcTime: Infinity
   }));
 }