add angular query devtools for development

ls1intum · Sep 14, 2024 · 42e41c9 · 42e41c9
1 parent 169fb03
commit 42e41c9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/webapp/src/app/app.component.html b/webapp/src/app/app.component.html
@@ -1,3 +1,6 @@
+@if (isDevMode()) {
+  <angular-query-devtools />
+}
 <div class="flex flex-col min-h-dvh">
   <header class="container flex items-center justify-between pt-4">
     <a class="flex gap-2 items-center hover:text-muted-foreground" routerLink="/">

diff --git a/webapp/src/app/app.component.ts b/webapp/src/app/app.component.ts
@@ -1,15 +1,20 @@
-import { Component } from '@angular/core';
+import { Component, isDevMode } from '@angular/core';
+import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { ThemeSwitcherComponent } from './components/theme-switcher/theme-switcher.component';
 import { LucideAngularModule } from 'lucide-angular';
+import { ThemeSwitcherComponent } from './components/theme-switcher/theme-switcher.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, LucideAngularModule, ThemeSwitcherComponent, RouterLink, RouterLinkActive],
+  imports: [RouterOutlet, LucideAngularModule, ThemeSwitcherComponent, RouterLink, RouterLinkActive, AngularQueryDevtools],
   templateUrl: './app.component.html',
   styles: []
 })
 export class AppComponent {
   title = 'Hephaestus';
+
+  isDevMode() {
+    return isDevMode();
+  }
 }