From 488990f634bf871512ba8ddd45d89c5c0af81a8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20S=C3=A4ume?= <dominik.saeume@hmmh.de>
Date: Tue, 21 Jan 2025 10:13:24 +0100
Subject: [PATCH] Fix: Header not working with router links

---
 src/app/header/header.component.html |  2 +-
 src/app/header/header.component.ts   | 32 +++++++++++++++-------------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 5b37ea5..d9f7b2f 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,6 +1,6 @@
 <mat-toolbar class="header">
     <nav>
-        <a routerLink="'/'" mat-button>
+        <a routerLink="" mat-button>
             <mat-icon>badge</mat-icon>
             EMS</a>
         @for (route of routes; track route) {
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 3e08782..659cd05 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -1,10 +1,10 @@
-import {AsyncPipe, Location, TitleCasePipe} from '@angular/common';
-import {Component, OnInit} from '@angular/core';
-import {MatAnchor, MatButton, MatIconButton} from '@angular/material/button';
-import {MatIcon} from '@angular/material/icon';
-import {MatToolbar} from '@angular/material/toolbar';
-import {Router, RouterLink} from '@angular/router';
-import {AuthService} from '@core/auth/auth.service';
+import { AsyncPipe, TitleCasePipe } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { MatAnchor, MatButton, MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatToolbar } from '@angular/material/toolbar';
+import { EventType, Router, RouterLink } from '@angular/router';
+import { AuthService } from '@core/auth/auth.service';
 
 @Component({
     selector: 'app-header',
@@ -26,22 +26,24 @@ export class HeaderComponent implements OnInit {
 
     constructor(
         private router: Router,
-        private location: Location,
         protected auth: AuthService
     ) {
     }
 
     ngOnInit(): void {
-        this.routes = this.router.config
+        const routes = this.router.config
             .filter(route => !route.path?.includes(':'))
-            .filter(route => !route.path?.includes('/'))
-            .map(route => ({
+            .filter(route => !route.path?.includes('/'));
+
+        this.router.events.subscribe((event) => {
+            if (event.type != EventType.NavigationEnd) {
+                return;
+            }
+            this.routes = routes.map(route => ({
                 path: `/${route.path}`,
                 title: route.title as string,
-                class: `/${route.path}` == (this.location.path() || '/') ? 'active' : ''
+                class: `/${route.path}` == event.url ? 'active' : ''
             }));
+        });
     }
 }
-
-
-