set tab in query params

src/angular/frontend/src/app/components/tab-group/tab-group.component.ts

@@ -4,7 +4,7 @@ import {
   ContentChildren,
   input,
   model,
-  OnInit,
+  OnInit, output,
   QueryList,
   ViewContainerRef
 } from '@angular/core';
@@ -30,6 +30,7 @@ export class TabGroupComponent implements OnInit, AfterViewInit {
 
   public tabs = input.required<TabGroup[]>();
   public activeTabId = model<string | null>();
+  public tabChanged = output<TabGroup>();
 
   @ContentChildren(ActiveTabDirective) tabTemplates!: QueryList<ActiveTabDirective>;
 
@@ -38,8 +39,10 @@ export class TabGroupComponent implements OnInit, AfterViewInit {
     toObservable(this.activeTabId)
       .pipe(takeUntilDestroyed())
       .subscribe(id => {
-        if (id)
+        if (id) {
           this.renderTab(id);
+          this.tabChanged.emit(this.tabs().find(x => x.id === id)!);
+        }
       })
   }
 

src/angular/frontend/src/app/components/tenant/tenant-detail/tenant-detail.component.html

@@ -1,4 +1,4 @@
-<app-tab-group [tabs]="tabs">
+<app-tab-group [tabs]="tabs" (tabChanged)="tabChanged($event)" [activeTabId]="activeTabId()">
 
   <ng-template tabId="subjects" let-tab>
     {{tab.name}} - content

src/angular/frontend/src/app/components/tenant/tenant-detail/tenant-detail.component.ts

@@ -1,6 +1,7 @@
-import {Component} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {TabGroup, TabGroupComponent} from '../../tab-group/tab-group.component';
 import {ActiveTabDirective} from '../../tab-group/active-tab.directive';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-tenant-detail',
@@ -36,4 +37,24 @@ export class TenantDetailComponent {
     } satisfies TabGroup
   ]
 
+  protected activeTabId = signal<string | null>(null)
+
+  private route = inject(ActivatedRoute);
+  private router = inject(Router)
+
+  constructor() {
+    const tabId = this.route.snapshot.queryParamMap.get('tab');
+    this.activeTabId.set(tabId)
+  }
+
+  async tabChanged(tab: TabGroup) {
+    await this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: {
+        tab: tab.id
+      },
+      queryParamsHandling: 'merge',
+      skipLocationChange: false,
+    });
+  }
 }